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 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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
As operações de edição de imagem não são compatíveis com imagens GIF. As alterações feitas no modo de edição de GIFs não serão mantidas.
Se os recursos do Dynamic Media estiverem habilitados, a edição da imagem propriamente dita deve ser executada no console de ativos.
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.
Para obter mais informações sobre o Corte inteligente, assista a este vídeo sobre o recurso.
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.
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.
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.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.
&
, independentemente do Tipo de predefinição selecionado.dc:title
no DAM.As opções Corte inteligente e Predefinição de imagem são mutuamente exclusivas. Se um(a) autor(a) precisar usar uma predefinição de imagem junto com uma representação de corte inteligente, será necessário 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 seja disponibilizado.
É 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.
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.