Componente de imagem (v1)

O Componente principal de imagem é 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 ofertas de 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, bem como o corte e configurações 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 no diálogo de configuração e cortar a imagem no 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.

Versão do AEM Componente de imagem v1
6.3 Compatível
6.4 Compatível
CUIDADO

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.

Saída de componente de exemplo

A amostra a seguir é retirada de 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?lang=pt-BR" 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"
            }
OBSERVAÇÃO

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 obter mais informações.

Configurar caixa de diálogo

Além do diálogo de edição padrão e diálogo de design, o componente de imagem oferece uma caixa de diálogo de configuração, onde a própria imagem é definida juntamente com sua descrição e propriedades básicas.

  • Ativos da imagem

  • 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 da 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 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.
  • 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 cursor do mouse sobre a imagem.

Editar Caixa de Diálogo

A caixa de diálogo Editar permite que o autor de conteúdo recorte, modifique o mapa de lançamento e faça zoom da imagem.

  • Começar a cortar

    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 em AEM

      • Se o caminho não estiver em AEM, use o URL absoluto. Os caminhos não absolutos serão interpretados de acordo com a 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.

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 Design

A caixa de diálogo de design permite que o autor do modelo defina os uploads de recorte, upload e rotação que o autor de conteúdo tem ao usar esse componente.

Principal

Na guia Main, é possível definir uma lista de larguras permitidas em pixels para a imagem carregar automaticamente a largura mais apropriada da lista.

Toque ou clique no botão Add para adicionar outro tamanho.

  • Use as alças de captura para reorganizar a ordem dos tamanhos.
  • Use o ícone de exclusão para remover uma largura.

Por padrão, o carregamento de imagens é adiado até ficarem visíveis. Selecione a opção Desativar o carregamento lento para carregar as imagens ao carregar a página.

Recursos

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

    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 de seu computador local. Para forçar autores de conteúdo a selecionar somente ativos de 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 direito.

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

    A opção Flip é desativada por padrão. Ativá-la exibirá os botões Flip Verticalmente e Flip Horizontally na caixa de diálogo de edição do componente de imagem, no entanto, no momento, o recurso não é 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 permitir 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 proporção de corte predefinida.
    • Insira um nome descritivo, que será mostrado na lista suspensa Iniciar corte.
    • 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 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.

O projeto de componentes principais inteiro pode ser baixado do GitHub.

Mais detalhes sobre o desenvolvimento dos Componentes principais podem ser encontrados na documentação do desenvolvedor dos Componentes principais.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now