Componente de imagem image-component

Iniciar recorte

Selecionar essa opção abre uma lista suspensa para proporções de corte predefinidas.

• Escolha a opção Remover corte para exibir o ativo original.

Depois que uma opção de recorte é selecionada, use as alças azuis para dimensionar o recorte na imagem.

Girar para a direita

Use esta opção para girar a imagem 90° para a direita (no sentido horário).

Redefinir zoom

Se a imagem já tiver sido ampliada, use essa opção para redefinir o nível de zoom.

Abrir controle deslizante de zoom

Use essa opção para exibir um controle deslizante para controlar o nível de zoom da imagem.

Herdar imagem em destaque da página - Esta opção usa a imagem em destaque da página vinculada ou da página atual, se a imagem não estiver vinculada.

Ativo de imagem: é preenchido automaticamente se a opção Herdar imagem em destaque da página estiver selecionada. Desmarque para definir manualmente a imagem com as opções a seguir.

• Solte um ativo do navegador de ativos ou toque na opção Procurar para fazer upload a partir do sistema de arquivos local.

• Toque ou clique em Limpar para desmarcar a imagem atualmente selecionada.

• Toque ou clique em Escolher para abrir o navegador de ativos e selecionar uma imagem.

  • Se o Suporte a ativos remotos estiver habilitado, você terá diversas opções para escolher um ativo:

    • Local: seleciona de uma biblioteca local de ativos do AEM.
    • Remoto: seleciona de uma biblioteca do Dynamic Media fora da instância do AEM.

• Toque ou clique em Editar para gerenciar as representações do ativo no Editor de ativos.

Texto alternativo para acessibilidade - Este campo permite definir uma descrição da imagem para usuários com deficiências visuais.

• Herdar texto alternativo da página - Esta opção utiliza a descrição alternativa do valor do ativo vinculado dos metadados dc:description no DAM ou da página atual, se nenhum ativo estiver vinculado.

Não fornecer um texto alternativo: marca a imagem a ser ignorada por tecnologias assistivas, como leitores de tela, nos casos em que a imagem é meramente decorativa ou não transmite informações adicionais para a página.

Tipo de predefinição - Define os tipos de predefinições de imagens disponíveis, seja a Predefinição de imagem ou o Corte inteligente, e só estará disponível quando os recursos do Dynamic Media estiverem habilitados.

• Predefinição de imagem - Quando o Tipo de predefinição da Predefinição de imagem é selecionado, a lista suspensa Predefinição de imagem é disponibilizada, permitindo a seleção das predefinições disponíveis do Dynamic Media. Isso só estará disponível se as predefinições forem definidas para o ativo selecionado.
• Corte inteligente: quando o Tipo de predefinição do Corte inteligente é selecionado, o menu suspenso de Representação é exibido, permitindo selecionar as representações disponíveis do ativo selecionado. Isso só estará disponível se as representações forem definidas para o ativo selecionado.
• Modificadores de imagem - Comandos adicionais de veiculação de imagens do Dynamic Media podem ser definidos aqui, separados por &, independentemente do Tipo de predefinição selecionado.

Legenda: informações adicionais sobre a imagem, exibidas abaixo da imagem por padrão.

• Obter legenda do DAM: quando selecionada, o texto da legenda da imagem é preenchido com o valor dos metadados dc:title no DAM.
• Exibir legendas como janelas pop-up: quando selecionada, a legenda não é exibida abaixo da imagem, mas aparece como um pop-up em alguns navegadores ao passar o mouse sobre a imagem.

Vinculação - Vincule a imagem a outro recurso.

• Use a caixa de diálogo de seleção para vincular a outro recurso do AEM.
• Se não estiver vinculando a um recurso do AEM, insira o URL absoluto. URLs não absolutos são interpretados como relativos ao AEM.
• Abrir link em nova guia: esta opção abre o link em uma nova janela do navegador.

ID: essa opção permite controlar o identificador exclusivo do componente no HTML e na camada de dados.

• Caso deixado em branco, um ID exclusivo é gerado automaticamente para você e pode ser encontrado ao inspecionar a página resultante.
• Se um ID for especificado, é responsabilidade do autor garantir que ele seja exclusivo.
• A alteração do ID pode afetar o rastreamento de CSS, JS e da camada de dados.

Ativar recursos DM - Quando marcada, os recursos do Dynamic Media ficam disponíveis.

• Essa opção só é exibida quando o Dynamic Media está habilitado no ambiente.

Habilitar imagens otimizadas para web: quando selecionada, o serviço de entrega de imagens otimizadas para a web fornecerá imagens no formato WebP, reduzindo o tamanho das imagens em cerca de 25%.

• Essa opção só está disponível no AEMaaCS.
• Se essa opção não for selecionada, ou se o serviço de entrega de imagens otimizadas para a web não estiver disponível, o Servlet de imagem adaptável será usado.

Desabilitar carregamento lento: quando selecionada, o componente pré-carregará todas as imagens sem utilizar o “carregamento lento”.

A imagem é decorativa - Define se a opção de imagem decorativa é automaticamente habilitada ao adicionar o componente de Imagem a uma página.

Obter texto alternativo do DAM - Define se a opção para recuperar o texto alternativo do DAM é ativada automaticamente ao adicionar o componente de Imagem a uma página.

Obter legenda do DAM - Define se a opção para recuperar a legenda do DAM é ativada automaticamente ao adicionar o componente de Imagem a uma página.

Exibir legendas como janelas pop-up - Define se a opção para exibir a legenda da imagem como um pop-up será habilitada automaticamente ao adicionar o componente de Imagem a uma página.

Redimensionar largura - Esse valor é usado para redimensionar a largura das imagens base que são ativos do DAM.

• A proporção das imagens será preservada.
• Se o valor for maior que a largura real da imagem, ele não terá efeito.
• Esse valor não tem efeito em imagens SVG.

Larguras - Define uma lista de larguras em pixels para a imagem e o componente carrega automaticamente a largura mais apropriada com base no tamanho do navegador.

• Toque ou clique no botão Adicionar para adicionar outro tamanho.

  • Use as alças para reorganizar a ordem dos tamanhos.
  • Use o ícone Excluir para remover uma largura.

• Por padrão, o carregamento de imagens é adiado até ficarem visíveis.

  • Selecione a opção Desabilitar carregamento lento para carregar as imagens ao carregar a página.

Qualidade JPEG: o fator de qualidade (porcentagem entre 0 e 100) para imagens JPEG transformadas (por exemplo, dimensionadas ou cortadas).