Dentre os Componentes de imagem, o principal é um componente de imagem adaptável.
O Componente de imagem apresenta seleção de imagem adaptável e comportamento responsivo com carregamento lento para o visitante da página, bem como posicionamento facilitado de página para o autor de conteúdo.
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.
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 as versões do componente são compatíveis e os links para a documentação das versões anteriores.
Versão do componente | AEM 6.4 | AEM 6.5 | AEM as a Cloud Service |
---|---|---|---|
v3 | - | Compatível | Compatível |
v2 | Compatível | Compatível | Compatível |
v1 | Compatível | Compatível | Compatível |
Para mais informações sobre as versões dos Componentes principais, consulte o documento Versões dos Componentes principais.
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 carregará 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.
Por padrão, o Componente de imagem é fornecido pelo Servlet de imagem adaptável. Consulte o documento Servlet de imagem adaptável para obter detalhes sobre seu funcionamento.
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.
Scalable Vector Graphics (SVG) são compatíveis com o componente de Imagem.
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.
O suporte a SVG requer a versão 2.1.0 dos Componentes principais ou superior, juntamente com o Pacote de serviços 2 para o AEM 6.4 ou superior, para oferecer suporte aos recursos do editor de imagens no AEM.
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.
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.
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.
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.
Texto alternativo para acessibilidade - Este campo permite definir uma descrição da imagem para usuários com deficiências visuais.
dc:description
no DAM ou da página atual, se nenhum ativo estiver vinculado.Ativos da imagem
Não fornecer um texto alternativo - Esta opção 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.
&
, independentemente do Tipo de predefinição selecionado.dc:title
no DAM.As opções Corte inteligente e de Predefinição de imagem são mutuamente exclusivas. Se um autor precisar usar uma predefinição de imagem junto com uma representação de Corte inteligente, ele precisará usar os Modificadores de imagem para adicionar predefinições manualmente.
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 fique disponível.
É possível definir uma lista de larguras em pixels para a imagem e o componente carregará automaticamente a largura mais apropriada com base no tamanho do navegador. Essa é uma parte importante dos recursos responsivos do componente de imagem.
Consulte o documento Servlet de imagem adaptável para obter dicas sobre como otimizar a seleção de representações definindo suas larguras criteriosamente.
O componente de Imagem é compatível com o Sistema de Estilos do AEM.
O componente de Imagem suporta a Camada de dados de clientes Adobe.