O componente de Imagem, dos Componentes principais, é um componente de imagem adaptável que realiza edição no local.
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 e recorte fáceis da imagem para o autor de conteúdo.
As larguras de imagem, 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 versão v2 do componente de imagem, que foi introduzida com a versão 2.0.0 dos componentes principais em janeiro de 2018.
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 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.
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.
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.
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.
&
, independentemente do Tipo de predefinição selecionado.dc:description
no DAM.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.
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.
Os recursos de recorte, rotação e zoom não se aplicam aos ativos do Dynamic Media. Se os recursos do Dynamic Media estiverem habilitados, qualquer edição desse tipo nos ativos do Dynamic Media deverá ser executada por meio da caixa de diálogo de configuração.
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).
Inverter horizontalmente
Use essa opção para inverter a imagem horizontalmente ou girar a imagem 180° ao longo do eixo y.
Inverter verticalmente
Use essa opção para inverter a imagem verticalmente ou girar a imagem 180° ao longo do eixo x.
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 as opções de recorte, upload e rotação que o autor de conteúdo tem ao usar esse componente.
Na guia Principal, é possível definir uma lista de larguras em pixels para a imagem. 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.
Além disso, você pode definir quais opções gerais de componente são automaticamente ativadas ou desativadas quando o autor adiciona o componente a uma página.
Consulte o documento Servlet de imagem adaptável para obter dicas sobre como otimizar a seleção de representações definindo suas larguras criteriosamente.
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.
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
Girar
Use esta opção para permitir que o autor de conteúdo use a opção
Girar para a direita.
Inverter
Use esta opção para permitir que o autor de conteúdo use as opções
Inverter horizontalmente e Inverter verticalmente.
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 Cortar 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.
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.