Componente de imagem

Dentre os Componentes de imagem, o principal é um componente de imagem adaptável.

Uso

O componente de imagem apresenta seleção de imagem adaptável e comportamento responsivo com carregamento lento para visitantes da página, além de facilidade no posicionamento de imagens para o autor de conteúdo.

O autor de conteúdo pode usar a caixa de diálogo de edição para editar o ativo de imagem, por exemplo, recortando ou girando a imagem.

As larguras de imagem e as configurações adicionais podem ser definidas pelo autor do modelo na caixa de diálogo de design. O editor de conteúdo pode fazer upload ou selecionar ativos na caixa de diálogo de configuração.

Versão e compatibilidade

A versão atual do componente de imagem é a v3, introduzida com a versão 2.18.0 dos componentes principais em fevereiro de 2022, e está descrita neste documento.

A tabela a seguir detalha todas as versões compatíveis do componente, as versões do AEM com as quais tais versões são compatíveis e os links para a documentação das versões anteriores.

Para mais informações sobre as versões dos Componentes principais, consulte o documento Versões dos Componentes principais.

Recursos responsivos

O componente de Imagem vem com recursos responsivos robustos prontos para uso. No nível do modelo da página, a caixa de diálogo design pode ser usada para definir as larguras padrão do ativo de imagem. O componente de imagem carrega automaticamente a largura correta para exibição, dependendo do tamanho da janela do navegador. À medida que a janela é redimensionada, o componente de Imagem carrega dinamicamente o tamanho de imagem correto. Não há necessidade de os desenvolvedores de componentes se preocuparem em definir consultas de mídia personalizadas, pois o componente de Imagem já está otimizado para carregar seu conteúdo.

Além disso, o componente de Imagem oferece suporte ao carregamento lento para adiar o carregamento do ativo de imagem real até que ele fique visível no navegador, aumentando a capacidade de resposta de suas páginas.

Suporte ao Dynamic Media

O componente de Imagem (a partir da versão 2.13.0) é compatível com os ativos do Dynamic Media. Quando habilitados, esses recursos oferecem a capacidade de adicionar ativos de imagem do Dynamic Media com um simples arrastar e soltar ou por meio do navegador de ativos, como você faria com qualquer outra imagem. Além disso, modificadores de imagem, predefinições de imagem e cortes inteligentes também são suportados.

Suas experiências da Web criadas com os Componentes principais podem oferecer recursos de imagens avançados potencializados pelo Sensei, robustos, de alto desempenho e em várias plataformas do Dynamic Media.

Suporte ao Dynamic Media de última geração

O componente de imagem (a partir da versão 2.23.2) oferece suporte a ativos remotos do Dynamic Media de última geração.

Após configurado, é possível selecionar ativos de um serviço remoto do Dynamic Media de última geração para o seu componente de imagem.

Suporte a SVG

Scalable Vector Graphics (SVG) são compatíveis com o componente de Imagem.

• É possível arrastar e soltar um ativo SVG do DAM e fazer upload de um arquivo SVG de um sistema de arquivos local.
• O arquivo SVG original é transmitido (as transformações são ignoradas).
• Para uma imagem SVG, as “imagens inteligentes” e os “tamanhos inteligentes” são definidos como uma matriz vazia no modelo de imagem.

Segurança

Por motivos de segurança, o SVG original nunca é chamado diretamente pelo Editor de imagens. É chamado por meio de <img src="path-to-component">. Isso impede que o navegador execute qualquer script incorporado no arquivo SVG.

Exemplo de saída do componente

Para experimentar o componente de imagem e ver exemplos de suas opções de configuração e de saídas HTML e JSON, visite a Biblioteca de componentes.

Detalhes técnicos

A documentação técnica mais recente sobre o componente de Imagem pode ser encontrada no GitHub.

Mais detalhes sobre o desenvolvimento dos Componentes principais podem ser encontrados na documentação do desenvolvedor dos Componentes principais.

O componente de Imagem oferece suporte a schema.org microdata.

Caixa de diálogo de edição

A caixa de diálogo de edição permite que autores(as) de conteúdo recortem e ampliem a imagem.

Dependendo se os recursos do Dynamic Media ou Dynamic Media de última geração estiverem habilitados, as opções disponíveis para edição de imagens serão diferentes.

Edição de ativos padrão

Se estiver editando ativos padrão do AEM, você pode clicar no ícone Editar no menu de contexto do componente de imagem.

• 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.

  

O editor local também pode ser usado para modificar a imagem. Devido às limitações de espaço, somente as opções básicas estão disponíveis em linha. Para opções de edição completas, use o modo de tela cheia.

Edição de ativos do Dynamic Media

Se os recursos do Dynamic Media estiverem habilitados, a edição da imagem propriamente dita deve ser executada no console de ativos.

Edição de ativos do Dynamic Media de última geração

Se o Dynamic Media de última geração estiver configurado, a opção de Corte inteligente estará disponível nos menus de contexto do componente.

Use a caixa de diálogo para ajustar o corte inteligente.

Caixa de diálogo de configuração

O componente de imagem oferece uma caixa de diálogo de configuração, onde a própria imagem é definida juntamente com sua descrição e propriedades básicas.

Guia Ativo

• 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 os recursos do Dynamic Media de última geração estiverem habilitados, haverá várias opções para selecionar 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.

Guia Metadados

• 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.

Guia Estilos

O componente de imagem é compatível com o Sistema de estilos do AEM.

Use o menu suspenso para selecionar os estilos que deseja aplicar ao componente. As seleções feitas na caixa de diálogo de edição têm o mesmo efeito das selecionadas na barra de ferramentas do componente.

Os estilos devem ser configurados para esse componente na caixa de diálogo de design para que o menu suspenso seja disponibilizado.

Caixa de diálogo de design

Guia Principal

• 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.

É possível definir uma lista de larguras em pixels para a imagem, e o componente carregará automaticamente a largura mais apropriada para o tamanho do navegador. Essa é uma parte importante dos recursos responsivos do componente de imagem.

• 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).

Guia Estilos

O componente de Imagem é compatível com o Sistema de Estilos do AEM.

Camada de dados de clientes Adobe

O componente de Imagem suporta a Camada de dados de clientes Adobe.