Componente da imagem

O Componente principal de imagem é um componente de imagem adaptável que possui edição no local.

Uso

O Componente de imagem possui seleção adaptável de imagem e comportamento responsivo com carregamento lento para o visitante da página, bem como posicionamento fácil da imagem e recorte para o autor do conteúdo.

As larguras de imagem, bem como as configurações de recorte e adicionais podem ser definidas pelo autor do modelo na caixa de diálogo design. O editor de conteúdo pode fazer upload ou selecionar ativos na caixa de diálogo de configuração e cortar a imagem na caixa de diálogo de edição. Para maior conveniência, a modificação simples no local da imagem também está disponível.

Recursos responsivos

O Componente de imagem vem com recursos robustos e responsivos prontos imediatamente. No nível do modelo de 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 correto da imagem dinamicamente. Não há necessidade de desenvolvedores de componentes se preocuparem com a definição de query de mídia personalizados, 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 esteja visível no navegador, aumentando a capacidade de resposta das páginas.

Versão e compatibilidade

A versão atual do Componente de imagem é a v2, que foi introduzida com a versão 2.0.0 dos Componentes principais em janeiro de 2018, e é descrita neste documento.

A tabela a seguir detalha todas as versões compatíveis do componente, as versões AEM com as quais as versões do componente são compatíveis e os links para a documentação de versões anteriores.

Versão do componente AEM 6.4 AEM 6.5 AEM as a Cloud Service
v2 Compatível Compatível Compatível
v1 Compatível Compatível -

Para obter mais informações sobre versões e versões dos Componentes principais, consulte o documento Versões dos componentes principais.

Suporte a SVG

O SVG (Scalable Vetor Graphics) é compatível com o Componente de imagem.

  • Arrastar e soltar um ativo SVG do DAM e carregar um upload de arquivo SVG de um sistema de arquivos local são suportados.
  • O Adaptive Image Servlet transmite o arquivo SVG original em fluxo contínuo (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 scripts incorporados ao arquivo SVG.

CUIDADO

O suporte a SVG requer a versão 2.1.0 dos Componentes principais ou superior, juntamente com o service pack 2 para AEM 6.4 ou superior, a fim de oferecer suporte aos recursos do editor de imagens no AEM.

Exemplo de saída do componente

Para experimentar o Componente de imagem e ver exemplos de suas opções de configuração, bem como a saída 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.

Para obter mais detalhes sobre o desenvolvimento dos Componentes principais, consulte a documentação do desenvolvedor dos Componentes principais.

Observação

Desde a versão 2.1.0 dos Componentes principais, o Componente de imagem oferece suporte a schema.org microdata.

Configurar caixa de diálogo

Além da caixa de diálogo padrão edit e da caixa de diálogo design, o componente de imagem oferta uma caixa de diálogo de configuração na qual a própria imagem é definida juntamente com sua descrição e propriedades básicas.

Guia Ativo

Guia Ativo da caixa de diálogo de configuração do Componente de imagem

  • Ativos da imagem

Guia Metadados

Guia Metadados da caixa de diálogo de configuração do Componente de imagem

  • A imagem é
    decorativaVerifique 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 alternativoAlternativa
    textual do significado ou função da imagem, para leitores com deficiências visuais.

    • Obter texto alternativo do DAM - quando marcado, o texto alternativo da imagem será preenchido com o valor dos metadados dc:description no DAM.
  • LegendaInformações adicionais sobre a imagem, exibidas abaixo da imagem por padrão.

    • Obter legenda do
      DAMWe o texto da legenda da imagem marcado será preenchido com o valor do
      dc:title metadados no DAM.
    • Exibir legenda como pop-
      upQuando selecionada, 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.
  • Link

    • Vincule a imagem a outro recurso.
    • Use a caixa de diálogo de seleção para vincular a outro recurso AEM.
    • Se não estiver vinculando a um recurso AEM, insira o URL absoluto. URLs não solutos serão interpretados como relativos a AEM.
  • ID - Essa opção permite controlar o identificador exclusivo do componente no HTML e na Camada de dados.

    • Se deixado em branco, uma ID exclusiva é gerada automaticamente para você e pode ser encontrada inspecionando a página resultante.
    • Se uma ID for especificada, é responsabilidade do autor garantir que seja exclusiva.
    • A alteração da ID pode afetar o CSS, o JS e o rastreamento da camada de dados.

Editar caixa de diálogo

A caixa de diálogo de edição permite que o autor do conteúdo recorte, modifique o mapa de inicialização e aumente o zoom da imagem.

Caixa de diálogo de edição do componente de imagem

  • Recorte de start

    Ícone de recorte de start

    Selecionar essa opção abre uma lista suspensa para proporções de corte predefinidas.

    • Escolha a opção Mão Livre para definir seu próprio corte.
    • Escolha a opção Remover corte para exibir o ativo original.

    Depois que uma opção de recorte for selecionada, use as alças azuis para dimensionar o recorte na imagem.

    Opções de corte

  • Girar para a direita

    Ícone Girar para a direita

    Use essa opção para girar a imagem 90° para a direita (no sentido horário).

  • Virar horizontalmente

    Ícone Virar horizontalmente

    Use essa opção para virar a imagem horizontalmente ou girar a imagem 180° ao longo do eixo y.

  • Virar Verticalmente

    Ícone Virar verticalmente

    Use essa opção para girar a imagem na vertical ou girar a imagem 180° ao longo do eixo x.

  • Redefinir zoom

    Redefinir ícone de zoom

    Se a imagem já tiver sido ampliada, use esta opção para redefinir o nível de zoom.

  • Abrir controle deslizante de zoom

    Abrir ícone de controle deslizante de zoom

    Use essa opção para exibir um controle deslizante para controlar o nível de zoom da imagem.

    Controle deslizante de zoom

O editor no local também pode ser usado para modificar a imagem. Devido a limitações de espaço, somente as opções básicas estão disponíveis em linha. Para opções de edição completa, use o modo de tela cheia.

Opções de edição de imagem no local

Observação

As operações de edição de imagens (recortar, virar, girar) não são suportadas para imagens GIF. Essas alterações feitas no modo de edição em GIFs não serão persistentes.

Caixa de diálogo Design

A caixa de diálogo de design permite que o autor do modelo defina as opções de recorte, upload e rotação e upload que o autor do conteúdo tem ao usar este componente.

Guia Principal

Na guia Main, é 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.

Além disso, você pode definir quais opções gerais de componente são automaticamente ou desativadas quando o autor adiciona o componente a uma página.

Guia principal da caixa de diálogo de design do Componente de imagem

  • Ativar
    carregamento lentoDefine se a opção de carregamento lento é ativada automaticamente ao adicionar o componente de imagem a uma página.

  • A imagem é
    decorativaDefina se a opção de imagem decorativa é ativada automaticamente ao adicionar o componente de imagem a uma página.

  • Obtenha texto alternativo do
    DAMDefine se a opção para recuperar o texto alternativo do DAM estiver automaticamente ativada ao adicionar o componente de imagem a uma página.

  • Obtenha a legenda do
    DAMDefine se a opção para recuperar a legenda do DAM é automaticamente ativada ao adicionar o componente de imagem a uma página.

  • Exibir legenda como pop-
    upDefina se a opção para exibir a legenda de imagem como um pop-up é automaticamente ativada ao adicionar o componente de imagem a uma página.

  • Desative UUID
    TrackingCheck para desativar o rastreamento do UUID do ativo de imagem.


  • LargurasDefine 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 de captura para reorganizar a ordem dos tamanhos.
      • Use o ícone Excluir para remover uma largura.
    • Por padrão, o carregamento de imagens é adiado até que se tornem visíveis.
      • Selecione a opção Desativar carregamento lento para carregar as imagens ao carregar a página.
  • Qualidade JPEG
    O fator de qualidade (em porcentagem de 0 e 100) para imagens JPEG transformadas (por exemplo, dimensionadas ou cortadas).

Observação

A opção Qualidade JPEG está disponível a partir da versão 2.2.0 dos Componentes principais.

Observação

A partir da versão 2.2.0 dos Componentes principais, o Componente de imagem adiciona o atributo UUID exclusivo data-asset-id ao ativo de imagem para permitir o rastreamento e a análise do número de visualizações que os ativos individuais recebem.

Guia Recursos

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 opções de recorte.

  • Origem

    Caixa de diálogo de design do Componente de imagem Guia Recursos

    Selecione a opção Permitir o upload de ativos do sistema de arquivos para permitir que os autores de conteúdo carreguem imagens de seu computador local. Para forçar os autores de conteúdo a selecionar somente ativos de AEM, desmarque essa opção.

  • Orientação

    Caixa de diálogo de design do Componente de imagem Guia Recursos


  • GirarUse esta opção para permitir que o autor do conteúdo use a variável
    Girar direito.


  • VirarUse esta opção para permitir que o autor do conteúdo use a variável
    Opções Virar horizontalmente e Virar verticalmente.

    CUIDADO

    A opção Flip está desativada por padrão. Habilitá-lo exibirá os botões Virar Verticalmente e Virar Horizontalmente na caixa de diálogo de edição do componente de imagem, no entanto, o recurso não é suportado atualmente pelo AEM e quaisquer alterações feitas usando essas opções não serão persistentes.

  • Cortar

    Caixa de diálogo de design do Componente de imagem Guia Recursos

    Selecione a opção Permitir recorte para permitir que o autor do conteúdo recorte a imagem no componente na caixa de diálogo de edição.

    • Clique em Adicionar para adicionar uma proporção de corte predefinida.
    • Digite um nome descritivo, que será exibido na lista suspensa Recortar do Start.
    • Insira a proporção numérica do aspecto.
    • Use as alças de arrastar para reorganizar a ordem das proporções
    • Use o ícone da lixeira para excluir uma proporção.
    CUIDADO

    Observe que em AEM, as proporções de corte são definidas como height/width. Isso difere da definição convencional de largura/altura e é feita por motivos de compatibilidade legal. Os autores de conteúdo não terão consciência de qualquer diferença, desde que você forneça um nome claro da proporção, já que o nome é exibido na interface do usuário e não a proporção propriamente dita.

Guia Estilos

O Componente de imagem suporta o AEM Sistema de estilo.

Servlet de imagem adaptável

O Componente de imagem usa o Servlet de imagem adaptativa do Componente principal. O Adaptive Image Service é responsável pelo processamento e transmissão de imagens e pode ser aproveitado pelos desenvolvedores em suas personalizações dos Componentes principais.

Observação

As solicitações condicionais por meio do cabeçalho Last-Modified são suportadas pelo Servlet de imagem adaptável, mas o cache do cabeçalho Last-Modified precisa ser habilitado no Dispatcher.

A amostra de configuração do Dispatcher do AEM Project Archetype já contém essa configuração.

Nesta página