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 possui seleção adaptável de imagens com carregamento lento e recorte para o autor do conteúdo.

As larguras de imagem permitidas, bem como recortes 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 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.

Versão e compatibilidade

Este documento descreve a v1 do Componente de imagem, originalmente introduzido com a versão 1.0.0 dos Componentes principais com o AEM 6.3.

A tabela a seguir lista a compatibilidade de 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.

Exemplo de saída do componente

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

  • 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 função da imagem, para leitores com deficiências visuais.

  • 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 - Informações adicionais sobre a imagem, exibidas abaixo da imagem, são 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.

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.

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

  • Girar para a direita

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

  • Mapa de lançamento

    Use essa opção para aplicar um mapa de inicialização à imagem. Selecionar essa opção abre uma nova janela permitindo que o usuário selecione 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 com o duplo 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 de redimensionamento azuis para ajustar a forma.

    Depois de dimensionar o mapa de inicialização, 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 em AEM, use o URL absoluto. Caminhos não absolutos serão interpretados em relação ao 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 esta 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 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.

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 os uploads de corte, upload e rotação que o autor do conteúdo possui ao usar este componente.

Principal

Na guia Main, é possível definir uma lista de larguras permitidas em pixels para que a imagem carregue automaticamente a largura mais apropriada da 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é que se tornem visíveis. Selecione a opção Desativar carregamento lento para carregar as imagens ao carregar a página.

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

    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

    • Girar - Use essa opção para permitir que o autor do conteúdo use a opção Girar direita.

    • 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

    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.

Detalhes técnicos

A documentação técnica mais recente sobre o Componente de imagem pode ser encontrada no GitHub.

Todo o projeto de componentes principais pode ser baixado do GitHub.

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

Nesta página