O componente de Imagem, dos Componentes principais, é um componente de imagem adaptável com edição no local.
O componente de Imagem permite a fácil colocação de ativos de imagem e oferece edição no local. Ele apresenta seleção de imagem adaptável com carregamento lento, bem como recorte para o autor de conteúdo.
As larguras de imagem permitidas, o corte 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 e recortar a imagem na caixa de diálogo de edição. Para maior comodidade, a modificação simples no local da imagem também está disponível.
Este documento descreve a v1 do componente de Imagem, introduzido originalmente com a versão 1.0.0 dos Componentes principais, com o AEM 6.3.
A tabela a seguir lista a compatibilidade da v1 do componente de Imagem.
Versão do AEM | Componente de Imagem v1 |
---|---|
6.3 | Compatível |
6.4 | Compatível |
Este documento descreve a v1 do componente de Imagem.
Para obter detalhes sobre a versão atual do componente de Imagem, consulte o documento Componente de Imagem.
O exemplo a seguir foi retirado do We.Retail.
<div class="cmp cmp-image aem-GridColumn aem-GridColumn--default--12">
<noscript data-cmp-image="{"smartImages":[],"smartSizes":[],"lazyEnabled":true}">
<img src="/content/we-retail/us/en/equipment/_jcr_content/root/responsivegrid/image.img.jpg" alt="Surfboard"/>
</noscript>
</div>
"image": {
"columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
"smartSizes": [],
"smartImages": [],
"lazyEnabled": true,
"src": "/content/we-retail/us/en/equipment/equipment/jcr%3acontent/root/responsivegrid/image.img.jpeg",
":type": "weretail/components/content/image"
}
A exportação JSON dos Componentes principais requer a versão 1.1.0 dos Componentes principais. Consulte as informações de compatibilidade dos Componentes principais v1 para mais informações.
Além da caixa de diálogo de edição padrão e da caixa de diálogo de design, o componente de Imagem oferece uma caixa de diálogo de configuração, em que a própria imagem é definida com sua descrição e propriedades básicas.
Ativos da imagem
Imagem decorativa - Verifique se a imagem deve ser ignorada pela tecnologia assistiva e, portanto, não requer um texto alternativo. Isso se aplica somente a imagens decorativas.
Texto alternativo - Alternativa textual do significado ou função da imagem para leitores com deficiência visual.
Link
Legenda - As informações adicionais sobre a imagem, exibidas abaixo da imagem, podem ser padrão.
Exibir legenda como pop-up - Quando marcada, a legenda não será exibida abaixo da imagem, mas como um pop-up exibido por alguns navegadores ao passar o mouse sobre a imagem.
A caixa de diálogo de edição permite que o autor de conteúdo recorte, modifique o mapa de lançamento e faça zoom da 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).
Mapa de lançamento
Use esta opção para aplicar um mapa de lançamento à imagem. Selecionar essa opção abre uma nova janela que permite ao usuário selecionar a forma do mapa:
Adicionar mapa retangular
Adicionar mapa circular
Adicionar mapa de polígono
Depois que uma forma de mapa é selecionada, ela é sobreposta à imagem, permitindo o redimensionamento. Arraste e solte as alças azuis de redimensionamento para ajustar a forma.
Após dimensionar o mapa de lançamento, clique nele para abrir uma barra de ferramentas flutuante para definir o caminho do link.
Use a opção Seletor de caminho para selecionar um caminho no AEM.
Se o caminho não estiver no AEM, use o URL absoluto. Os caminhos não absolutos serão interpretados de acordo com o AEM.
Texto alternativo
Descrição alternativa do destino do caminho
Target
Toque ou clique na marca de seleção azul para salvar, no x preto para cancelar, e na lixeira vermelha para excluir o mapa.
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 imagens (recortar, virar, girar) não são compatíveis com imagens GIF. Essas alterações feitas no modo de edição para GIFs não serão persistentes.
A caixa de diálogo de design permite que o autor do modelo defina o recorte, upload e os uploads de rotação que o autor de conteúdo terá ao usar esse componente.
Na guia Principal é possível definir uma lista de larguras em pixels permitidas para que a imagem carregue automaticamente a largura mais apropriada na lista.
Toque ou clique no botão Adicionar para adicionar outro tamanho.
Por padrão, o carregamento de imagens é adiado até ficarem visíveis. Selecione a opção Desativar carregamento lento para carregar as imagens ao carregar a página.
Na guia Recursos, é possível definir quais opções estão disponíveis para os autores de conteúdo ao usar o componente, incluindo opções de upload, orientação e de recorte.
Ativar imagens otimizadas para web - quando marcada, o serviço de entrega de imagens otimizadas para a Web fornecerá imagens no formato WebP, reduzindo os tamanhos de imagem em cerca de 25%.
Origem
Selecione a opção Permitir o upload de ativos do sistema de arquivos para permitir que os autores de conteúdo façam upload de imagens do computador local. Para forçar autores de conteúdo a selecionar somente ativos do AEM, desmarque essa opção.
Orientação
A opção Inverter está desativada por padrão. Ativar essa opção exibirá os botões Inverter verticalmente e Inverter horizontalmente na caixa de diálogo de edição do componente de imagem. No entanto, o recurso não é atualmente suportado pelo AEM e quaisquer alterações feitas usando essas opções não serão persistentes.
Cortar
Selecione a opção Permitir recorte para que o autor de conteúdo recorte a imagem no componente na caixa de diálogo de edição.
Observe que no AEM, as taxas de proporções de corte estão definidas como altura/largura. Isso difere da definição convencional de largura/altura e é feita por motivos de compatibilidade legal. Os autores de conteúdo não estarão cientes de qualquer diferença, desde que você forneça um nome claro da proporção, pois o nome é mostrado na interface do usuário e não a própria proporção.
A documentação técnica mais recente sobre o componente de Imagem pode ser encontrada no GitHub.
Todo o projeto dos Componentes principais pode ser baixado do GitHub.
Mais detalhes sobre o desenvolvimento dos Componentes principais podem ser encontrados na documentação do desenvolvedor dos Componentes principais.