Images optimisées avec AEM Headless images-with-aem-headless

Les images sont un aspect essentiel permettant de développer des expériences AEM Headless riches et attrayantes. AEM Headless prend en charge la gestion des ressources d’image et leur diffusion optimisée.

Les fragments de contenu utilisés dans la modélisation de contenu d’AEM Headless font souvent référence à des ressources d’image destinées à être affichées dans l’expérience découplée. Les requêtes GraphQL d’AEM peuvent être écrites afin de fournir des URL aux images en fonction de l’emplacement de référence de l’image.

Le type ImageRef comporte quatre options d’URL pour les références de contenu :

_dynamicUrl est l’URL recommandée à utiliser pour la diffusion de ressource d’image et doit remplacer l’utilisation de _path, _authorUrl et _publishUrl dans la mesure du possible.

Modèle de fragment de contenu

Assurez-vous que le champ Fragment de contenu contenant la référence d’image est du type de données référence de contenu.

Les types de champ sont examinés dans le modèle de fragment de contenu, en sélectionnant le champ et en inspectant l’onglet Propriétés à droite.

Requête persistante GraphQL

Dans la requête GraphQL, renvoyez le champ en tant que type ImageRef et demandez le champ _dynamicUrl. Par exemple, vous pouvez interroger une Adventure dans le projet WKND Site et inclure l’URL de l’image pour les références de ressources d’image dans son champ primaryImage à l’aide une nouvelle requête persistante wknd-shared/adventure-image-by-path définie ainsi :

query($path: String!, $imageFormat: AssetTransformFormat=JPG, $imageSeoName: String, $imageWidth: Int, $imageQuality: Int) {
  adventureByPath(
    _path: $path
    _assetTransform: {
      format: $imageFormat
      width: $imageWidth
      quality: $imageQuality
      preferWebp: true
    }
  ) {
    item {
      _path
      title
      primaryImage {
        ... on ImageRef {
          _dynamicUrl
        }
      }
    }
  }
}

Variables de requête

{
  "path": "/content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp",
  "imageFormat": "JPG",
  "imageWidth": 1000,
}

La variable $path utilisée dans le filtre _path nécessite le chemin d’accès complet au fragment de contenu (par exemple, /content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp).

_assetTransform définit la manière dont l’_dynamicUrl est construite pour optimiser le rendu d’image servi. Les URL des images optimisées pour le web peuvent également être ajustées sur le client ou la cliente en modifiant les paramètres de requête de l’URL.

Réponse GraphQL

La réponse JSON obtenue contient les champs demandés, avec l’URL optimisée pour le web des ressources d’image.

{
  "data": {
    "adventureByPath": {
      "item": {
        "_path": "/content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp",
        "title": "Bali Surf Camp",
        "primaryImage": {
          "_dynamicUrl": "/adobe/dynamicmedia/deliver/dm-aid--a38886f7-4537-4791-aa20-3f6ef0ac3fcd/adobestock_175749320.jpg?preferwebp=true&width=1000&quality=80"
        }
      }
    }
  }
}

Pour charger l’image optimisée pour le web de l’image référencée dans votre application, utilisez l’_dynamicUrl de l’primaryImage comme URL source de l’image.

Dans React, l’affichage de l’image optimisée pour le web à partir de l’instance de publication AEM ressemble à ceci :

// The AEM host is usually read from a environment variable of the SPA.
const AEM_HOST = "https://publish-p123-e456.adobeaemcloud.com";
...
let dynamicUrl = AEM_HOST + data.adventureByPath.item.primaryImage._dynamicUrl;
...
<img src={dynamicUrl} alt={data.adventureByPath.item.title}/>

Souvenez-vous, _dynamicUrl n’inclut pas le domaine AEM. Vous devez donc fournir l’origine souhaitée de l’URL de l’image à résoudre.

URL réactives

L’exemple ci-dessus illustre l’utilisation d’une image à taille unique. Toutefois, dans les expériences web, des visionneuses d’images réactives sont souvent requises. Les images réactives peuvent être implémentées à l’aide de img srcsets ou d’éléments d’image. Le fragment de code suivant montre comment utiliser l’_dynamicUrl comme base. width est un paramètre d’URL que vous pouvez ensuite ajouter à l’_dynamicUrl pour alimenter différentes vues réactives.

// The AEM host is usually read from a environment variable of the SPA.
const AEM_HOST = "https://publish-p123-e456.adobeaemcloud.com";
...
// Read the data from GraphQL response
let dynamicUrl = AEM_HOST + data.adventureByPath.item.primaryImage._dynamicUrl;
let alt = data.adventureByPath.item.title;
...
{/*-- Example img srcset --*/}
document.body.innerHTML=`<img>
    alt="${alt}"
    src="${dynamicUrl}&width=1000}"
    srcset="`
      ${dynamicUrl}&width=1000 1000w,
      ${dynamicUrl}&width=1600 1600w,
      ${dynamicUrl}&width=2000 2000w,
      `"
    sizes="calc(100vw - 10rem)"/>`;
...
{/*-- Example picture --*/}
document.body.innerHTML=`<picture>
      <source srcset="${dynamicUrl}&width=2600" media="(min-width: 2001px)"/>
      <source srcset="${dynamicUrl}&width=2000" media="(min-width: 1000px)"/>
      <img src="${dynamicUrl}&width=400" alt="${alt}"/>
    </picture>`;

Exemple pour React

Créons une application React simple qui affiche des images optimisées pour le web selon les modèles d’images réactives. Il existe deux modèles principaux pour les images réactives :

Élément image avec srcset

Les éléments image avec srcset sont utilisés avec l’attribut sizes pour fournir différentes ressources d’image pour différentes tailles d’écran. Les Img srcsets sont utiles lorsque vous fournissez des ressources d’image différentes pour des tailles d’écran différentes.

Élément d’image

Les éléments d’image sont utilisés avec plusieurs éléments source afin de fournir différentes ressources d’image pour différentes tailles d’écran. Les éléments d’image sont utiles pour assurer des rendus d’image différents sur des formats d’écran différents.

Exemple de code

Cette application React simple utilise le SDK AEM Headless pour interroger les API AEM Headless afin d’obtenir un contenu Adventure, et affiche l’image optimisée pour le web à l’aide de l’élément image avec srcset et de l’élément d’image. Les éléments srcset et sources utilisent une fonction setParams personnalisée pour ajouter le paramètre de requête de diffusion optimisé pour le web à l’élément _dynamicUrl de l’image. Vous devez donc modifier le rendu d’image diffusé en fonction des besoins du client web.

La requête à AEM est effectuée dans le hook React personnalisé useAdventureByPath qui utilise le SDK d’AEM Headless.

// src/App.js

import "./App.css";
import { useAdventureByPath } from './api/persistedQueries'

const AEM_HOST = process.env.AEM_HOST;

function App() {

  /**
   * Update the dynamic URL with client-specific query parameters
   * @param {*} imageUrl the image URL
   * @param {*} params the AEM web-optimized image query parameters
   * @returns the dynamic URL with the query parameters
   */
  function setOptimizedImageUrlParams(imageUrl, params) {
    let url = new URL(imageUrl);
    Object.keys(params).forEach(key => {
      url.searchParams.set(key, params[key]);
    });
    return url.toString();
  }

  // Get data from AEM using GraphQL persisted query as defined above
  // The details of defining a React useEffect hook are explored in How to > AEM Headless SDK
  // The 2nd parameter define the base GraphQL query parameters used to request the web-optimized image
  let { data, error } = useAdventureByPath(
        "/content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp",
        { imageFormat: "JPG" }
      );

  // Wait for AEM Headless APIs to provide data
  if (!data) { return <></> }

  const alt = data.adventureByPath.item.title;
  const imageUrl =  AEM_HOST + data.adventureByPath.item.primaryImage._dynamicUrl;

  return (
    <div className="app">

      <h1>Web-optimized images</h1>

      {/* Render the web-optimized image img with srcset for the Adventure Primary Image */}
      <h2>Img srcset</h2>

      <img
        alt={alt}
        src={setOptimizedImageUrlParams(imageUrl, { width: 1000 })}
        srcSet={
            `${setOptimizedImageUrlParams(imageUrl, { width: 1000 })} 1000w,
             ${setOptimizedImageUrlParams(imageUrl, { width: 1600 })} 1600w,
             ${setOptimizedImageUrlParams(imageUrl, { width: 2000 })} 2000w`
        }
        sizes="calc(100vw - 10rem)"/>

       {/* Render the web-optimized picture for the Adventure Primary Image */}
        <h2>Picture element</h2>

        <picture>
          {/* When viewport width is greater than 2001px */}
          <source srcSet={setOptimizedImageUrlParams(imageUrl, { width : 2600 })} media="(min-width: 2001px)"/>
          {/* When viewport width is between 1000px and 2000px */}
          <source srcSet={setOptimizedImageUrlParams(imageUrl, { width : 2000})} media="(min-width: 1000px)"/>
          {/* When viewport width is less than 799px */}
          <img src={setOptimizedImageUrlParams(imageUrl, { width : 400, crop: "550,300,400,400" })} alt={alt}/>
        </picture>
    </div>
  );
}

export default App;