Componente de imagem

O componente de Imagem, dos Componentes principais, é um componente de imagem adaptável que realiza edição no local.

Uso

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.

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 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.

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 recortes 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.

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 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 as versões do componente 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
v2 Compatível Compatível Compatível
v1 Compatível Compatível -

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

Suporte a SVG

Scalable Vector Graphics (SVG) são compatíveis com o componente de Imagem.

  • O arrastar e soltar um ativo SVG do DAM e fazer upload de um arquivo SVG de um sistema de arquivos local são suportados.
  • O Servlet de imagem adaptável transmite o arquivo SVG original a ser 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.

ATENÇÃO

O suporte a SVG requer a versão 2.1.0 dos Componentes principais ou superior, juntamente com o Pacote de serviços 2 para o AEM 6.4 ou superior, para 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 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 configuração

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.

Guia Ativo

Guia Ativo da caixa de diálogo de configuração do componente de Imagem

  • Ativos da imagem
    • Solte um ativo do navegador de ativos ou toque na opção pesquisar para fazer upload de um sistema de arquivos local.
    • Toque ou clique em Limpar para desmarcar a imagem atualmente selecionada.
    • Toque ou clique em Editar para gerenciar as representações do ativo no editor de ativos.

Guia Metadados

Guia Metadados da caixa de diálogo de configuração do componente de Imagem

  • Tipo de predefinição - Define os tipos de predefinições de imagens disponíveis, seja a Predefinição de imagem ou o Recorte 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 fica disponível, permitindo a seleção das predefinições do Dynamic Media disponíveis. Isso só estará disponível se as predefinições forem definidas para o ativo selecionado.
    • Recorte inteligente - Quando o Tipo de predefinição do Recorte inteligente é selecionado, o menu suspenso de Representação fica disponível, permitindo a seleção das 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.
  • 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.
    • Obter texto alternativo do DAM - Quando marcado, o texto alternativo da imagem será preenchido com o valor dos metadados dc:description no DAM.
  • Legenda - Informações adicionais sobre a imagem, exibida abaixo da imagem por padrão.
    • Obter legenda do DAM - Quando marcado, o texto da legenda da imagem será preenchido com o valor dos metadados dc:title no DAM.
    • 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.
  • 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 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.
    • 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.
DICA

As opções Recorte 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 Recorte inteligente, ele precisará usar os Modificadores de imagem para adicionar predefinições manualmente.

Caixa de diálogo de edição

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.

OBSERVAÇÃO

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.

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

  • Iniciar recorte

    Ícone Iniciar recorte

    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 é 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 esta opção para girar a imagem 90° para a direita (no sentido horário).

  • Inverter horizontalmente

    Ícone Inverter horizontalmente

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

  • Inverter verticalmente

    Ícone Inverter verticalmente

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

  • Redefinir zoom

    Ícone 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

    Ícone Abrir 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 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.

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 compatíveis com imagens GIF. Essas alterações feitas no modo de edição para GIFs não serão persistentes.

Caixa de diálogo de design

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.

Guia Principal

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.

Guia Principal da caixa de diálogo de design do componente de Imagem

  • Habilitar recursos do DM - Quando marcado, os recursos habilitados do Dynamic Media ficam disponíveis.
  • Habilitar carregamento lento - Define se a opção de carregamento lento é habilitada automaticamente ao adicionar o componente de Imagem a uma página.
  • 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 legenda como 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.
  • Desativar o rastreamento de UUID - Marque para desativar o rastreamento da UUID do ativo 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 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é ficarem visíveis.
      • Selecione a opção Desativar 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).

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 de recorte.

  • Origem

    Guia Recursos da caixa de diálogo de design do componente de Imagem

    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

    Guia Recursos da caixa de diálogo de design do componente de Imagem

  • 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.

    ATENÇÃ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

    Guia Recursos da caixa de diálogo de design do componente de Imagem

    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.

    • Clique em Adicionar para adicionar uma taxa de proporção de corte predefinida.
    • Insira um nome descritivo, que será mostrado na lista suspensa Iniciar corte.
    • Insira a taxa numérica da proporção.
    • Use as alças de arrastar para reorganizar a ordem das taxas de proporções.
    • Use o ícone da lixeira para excluir uma taxa de proporção.
    ATENÇÃ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.

Guia Estilos

O componente de Imagem é compatível com o Sistema de Estilos do AEM.

Servlet de imagem adaptável

O componente de Imagem usa o Servlet de imagem adaptável do Componente principal. O Servlet de imagem adaptável é 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 pelo cabeçalho Last-Modified são suportadas pelo Servlet de imagem adaptável, mas o armazenamento em cache do cabeçalho Last-Modified precisa ser ativado no Dispatcher.

A amostra da configuração do Dispatcher do Arquétipo de projeto do AEM já contém essa configuração.

Camada de dados de clientes Adobe

O componente de Imagem suporta a Camada de dados de clientes Adobe.

Nesta página