DocumentaçãoAEMGuia dos Componentes principais

Componente de Imagem (v1) image-component-v

Last update: Sat May 20 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Developer
  • Admin
  • User

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

Uso usage

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 version-and-compatibility

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.

Versão do AEM
Componente de Imagem v1
6.3
Compatível
6.4
Compatível
CAUTION
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.

Exemplo de saída do componente sample-component-output

O exemplo a seguir foi retirado do We.Retail.

Captura de tela screenshot

HTML 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 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"
            }
NOTE
A exportação JSON dos Componentes principais requer a versão 1.1.0 dos Componentes principais. Consulte as informações de compatibilidade dos Componentes principais v1 para mais informações.

Caixa de diálogo de configuração configure-dialog

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 edit-dialog

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.

NOTE
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 design-dialog

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 main

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.

Recursos features

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.
    note caution
    CAUTION
    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.
    note caution
    CAUTION
    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 technical-details

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.

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c