Componente de Imagem (v1)

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

Uso

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.

Versão e compatibilidade

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.

Exemplo de saída do componente

O exemplo a seguir foi retirado do We.Retail.

Captura de tela

HTML

<div class="cmp cmp-image aem-GridColumn aem-GridColumn--default--12">

        <noscript data-cmp-image="{&#34;smartImages&#34;:[],&#34;smartSizes&#34;:[],&#34;lazyEnabled&#34;:true}">
            <img src="/content/we-retail/us/en/equipment/_jcr_content/root/responsivegrid/image.img.jpg" alt="Surfboard"/>
        </noscript>

</div>

JSON

"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"
            }

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.

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

• 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

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

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

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.

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

  

• 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

    • Por padrão, adiciona um mapa de triângulo. Clique duas vezes em uma linha da forma para adicionar uma nova alça de redimensionamento azul em um novo lado.

  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.

  • Caminho

    • 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

      • Mesma guia
      • Nova guia
      • Quadro pai
      • Quadro superior

  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.

Caixa de diálogo de design

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.

Principal

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.

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

• Ativar imagens otimizadas para web - Quando marcada, 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.
  • Quando desmarcada ou quando o serviço de entrega de imagens otimizadas para a Web não estiver disponível, o Servlet de imagem adaptável será usado.

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.

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

  • Essa opção só está disponível no AEMaaCS.
  • Quando desmarcada ou quando o serviço de entrega de imagens otimizadas para a Web não estiver disponível, o Servlet de imagem adaptável será usado.

• 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 essa opção para permitir que o autor do 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

  

  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.

Detalhes técnicos

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.