Uso da biblioteca de imagens responsiva

Para adicionar a Biblioteca de imagens responsiva a uma página da Web e gerenciar imagens existentes com a biblioteca, conclua as etapas a seguir.

Para usar a biblioteca de imagens responsivas

  1. No Dynamic Media Classic, criar uma predefinição de imagem caso planeje usar a Biblioteca de imagens responsivas com predefinições.

    Ao definir as Predefinições de imagem usadas com a Biblioteca de imagens responsiva, não use configurações que afetem o tamanho da imagem, como wid=, hei=ou scl=. Não especifique campos de tamanho na Predefinição de imagem. Em vez disso, deixe-os como valores em branco.

  2. Adicione o arquivo JavaScript da biblioteca à página da Web.

    Antes de usar a API da biblioteca, inclua responsive_image.js. Esse arquivo JavaScript está localizado no libs/ subpasta da implantação padrão do IS-Viewers:

    <s7viewers_root>/libs/responsive_image.js

  3. Configurar imagens existentes.

    A biblioteca lê determinados atributos de configuração de uma instância de imagem com a qual está trabalhando. Definir atributos antes da variável s7responsiveImage A função da API é chamada para essa imagem.

    Também é recomendável colocar o URL da imagem existente na tag data-src atributo. Em seguida, configure o existente src para ter uma imagem de GIF 1x1 codificada como URI de dados. Ao fazer isso, o reduz o número de solicitações HTTP enviadas pela página da Web no momento do carregamento. Observe, no entanto, que se a SEO (otimização do mecanismo de pesquisa) for necessária, é melhor configurar um title atributo na instância da imagem.

    Veja a seguir um exemplo de definição data-breakpoints atributo para a imagem e usando um GIF 1x1 codificado como URI de dados:

    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940">

  4. Chame o s7responsiveImage Função da API para cada instância de imagem gerenciada pela biblioteca.

    Chame o s7responsiveImage Função da API para cada instância de imagem gerenciada pela biblioteca. Após essa chamada, a biblioteca substituirá a imagem original pela imagem baixada do Servidor de imagens de acordo com o tamanho do tempo de execução do IMG elemento no layout da página da Web e a densidade da tela do dispositivo.

    O código a seguir é um exemplo de chamada s7responsiveImage função da API em uma imagem, supondo que responsiveImage é uma ID dessa imagem:

    <script type="text/javascript">
 s7responsiveImage(document.getElementById("responsiveImage"));
</script>

Exemplo

A biblioteca é compatível com o trabalho simultâneo com muitas instâncias de imagem na página da Web. Portanto, repita as etapas 1 e 2 acima para cada imagem que você deseja que a biblioteca gerencie.

É responsabilidade da página da Web estilizar o elemento de imagem para torná-lo flexível em tamanho. A própria biblioteca de imagens responsivas não diferencia imagens de tamanho fixo de imagens "fluídas". Se aplicada a uma imagem de tamanho fixo, ela carrega a nova imagem apenas uma vez.

O código a seguir é um exemplo completo de uma página da Web trivial que tem uma única imagem fluida gerenciada pela Biblioteca de imagens responsiva. O exemplo contém um estilo CSS extra para tornar a imagem "responsiva" ao tamanho da janela do navegador da Web:

<!DOCTYPE html>
<html>
 <head>
  <style type="text/css">
  .container {
   width: 50%;
  }
  .fluidimage {
   max-width: 100%;
  }
  </style>
 </head>
 <body>
  <div class="container">
   <img id="responsiveImage" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="200,400,600,800" class="fluidimage">
  </div>
  <script type="text/javascript" src="https://s7d9.scene7.com/s7viewers/libs/responsive_image.js"></script>
  <script type="text/javascript">
   s7responsiveImage(document.getElementById("responsiveImage"));
  </script>
 </body>
</html>

Uso do Corte inteligente

Há dois modos de Corte inteligente disponíveis no AEM 6.4 e Dynamic Media Viewers 5.9:

  • Manual - pontos de interrupção definidos pelo usuário e comandos correspondentes do Serviço de imagens são definidos em um atributo no elemento de imagem.
  • Corte inteligente - as representações de corte inteligente calculadas são recuperadas automaticamente do servidor de entrega. A melhor representação é selecionada usando o tamanho do tempo de execução do elemento de imagem.

Para usar o modo Corte inteligente, defina a data-mode atributo para smart crop. Por exemplo:

<img
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src="https://imageserver.com/is/image/ExampleCo/SmartCropAsset"
data-mode="smartcrop">

O elemento de imagem associado envia um s7responsiveViewer durante o tempo de execução quando o ponto de interrupção muda.

         responsiveImage.addEventListener("s7responsiveViewer", function (event) {
           var s7event = event.s7responsiveViewerEvent;
           if(s7event.type == "breakpointchanged") {
              console.log("New width: " + s7event.width);
              console.log("Old width: " + s7event.oldWidth);
           }
        });

Nesta página