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 a ativos remotos
O componente de imagem (a partir da versão 2.23.2) é compatível com ativos remotos. Após configurado, será possível selecionar ativos de um serviço remoto 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.
As opções disponíveis para edição de imagens serão diferentes se você tiver o Dynamic Media ou o Suporte a ativos remotos habilitado.
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.
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 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.
- Herdar texto alternativo da página - Esta opção utiliza a descrição alternativa do valor do ativo vinculado dos metadados
-
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.
- Obter legenda do DAM: quando selecionada, o texto da legenda da imagem é preenchido com o valor dos metadados
-
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).