Utilisation de la bibliothèque d’images réactives

Pour ajouter une bibliothèque d’images réactives à une page web et gérer les images existantes avec la bibliothèque, procédez comme suit.

Pour utiliser la bibliothèque d’images réactives

  1. Dans Dynamic Media Classic, création d’un paramètre d’image prédéfini si vous prévoyez d’utiliser la bibliothèque d’images réactives avec des paramètres prédéfinis.

    Lorsque vous définissez des paramètres d’image prédéfinis utilisés avec la bibliothèque d’images réactives, n’utilisez aucun paramètre qui affecte la taille de l’image, comme wid=, hei=ou scl=. Ne spécifiez aucun champ de taille dans le paramètre d’image prédéfini. Conservez plutôt des valeurs vides.

  2. Ajoutez le fichier JavaScript de bibliothèque à votre page web.

    Avant d’utiliser l’API de bibliothèque, veillez à inclure responsive_image.js. Ce fichier JavaScript se trouve dans la variable libs/ sous-dossier de votre déploiement IS-Viewers standard :

    <s7viewers_root>/libs/responsive_image.js

  3. Configurez les images existantes.

    La bibliothèque lit certains attributs de configuration à partir d’une instance d’image avec laquelle elle travaille. Définissez des attributs avant le s7responsiveImage La fonction API est appelée pour cette image.

    Il est également conseillé de placer l’URL de l’image existante dans la variable data-src attribut. Ensuite, configurez le src pour disposer d’une image de GIF 1x1 codée en tant qu’URI de données. Cela permet de réduire le nombre de requêtes HTTP envoyées par la page web au moment du chargement. Notez toutefois que si le SEO (optimisation du moteur de recherche) est nécessaire, il est préférable de configurer une title sur l’instance d’image.

    Voici un exemple de définition de la variable data-breakpoints pour l’image et à l’aide d’un GIF 1x1 encodé en tant qu’URI de données :

    <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. Appelez le s7responsiveImage fonction d’API pour chaque instance d’image gérée par la bibliothèque.

    Appelez le s7responsiveImage fonction d’API pour chaque instance d’image gérée par la bibliothèque. Après un tel appel, la bibliothèque remplace l’image d’origine par l’image téléchargée à partir de la diffusion d’images en fonction de la taille d’exécution de la variable IMG dans la mise en page web et la densité de l’écran de l’appareil.

    Le code suivant est un exemple d’appel de s7responsiveImage fonction d’API sur une image, en supposant que responsiveImage est un identifiant de cette image :

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

Exemple

La bibliothèque prend en charge l’utilisation simultanée de nombreuses instances d’image sur la page web. Par conséquent, répétez les étapes 1 et 2 ci-dessus pour chaque image que vous souhaitez que la bibliothèque gère.

Il est de la responsabilité de la page web de mettre en forme l’élément image afin de le rendre flexible en termes de taille. La bibliothèque d’images réactives ne fait pas de distinction entre les images de taille fixe et les images "fluides". S’il est appliqué à une image à taille fixe, il ne charge la nouvelle image qu’une seule fois.

Le code suivant est un exemple complet d’une page web triviale qui comporte une seule image fluide gérée par la bibliothèque d’images réactives. L’exemple contient un style CSS supplémentaire pour rendre l’image "réactive" à la taille de la fenêtre du navigateur 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>

Utilisation du recadrage intelligent

Deux modes de recadrage intelligent sont disponibles dans AEM 6.4 et dans Dynamic Media Viewers 5.9 :

  • Manuel - les points d’arrêt définis par l’utilisateur et les commandes correspondantes du service d’image sont définis dans un attribut de l’élément image.
  • Recadrage intelligent - les rendus de recadrage intelligent calculés sont automatiquement récupérés à partir du serveur de diffusion. Le meilleur rendu est sélectionné à l’aide de la taille d’exécution de l’élément d’image.

Pour utiliser le mode Recadrage intelligent, vous devez définir la variable data-mode Attribuer à smart crop. Par exemple :

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

L’élément d’image associé distribue une s7responsiveViewer lors de l’exécution, lorsque le point d’arrêt change.

         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);
           }
        });

Sur cette page