Immagini ottimizzate con AEM headless images-with-aem-headless

Le immagini sono un aspetto critico dello sviluppo di esperienze AEM headless complesse e coinvolgenti. AEM Headless supporta la gestione delle immagini e la loro distribuzione ottimizzata.

I frammenti di contenuto utilizzati nella modellazione di contenuti headless AEM spesso fanno riferimento a risorse di immagini destinate a essere visualizzate nell’esperienza headless. Le query GraphQL dell’AEM possono essere scritte per fornire URL alle immagini in base alla provenienza dell’immagine.

Il tipo ImageRef dispone di quattro opzioni URL per i riferimenti al contenuto:

_dynamicUrl è l'URL consigliato da utilizzare per la consegna delle risorse immagine e dovrebbe sostituire l'utilizzo di _path, _authorUrl e _publishUrl quando possibile.

Modello per frammenti di contenuto

Verifica che il campo Frammento di contenuto contenente il riferimento all'immagine sia del tipo di dati riferimento contenuto.

I tipi di campo vengono esaminati nel Modello per frammenti di contenuto, selezionando il campo e controllando la scheda Proprietà a destra.

Query persistente GraphQL

Nella query GraphQL, restituisce il campo come tipo ImageRef e richiede il campo _dynamicUrl. Ad esempio, è possibile eseguire una query su un'avventura nel progetto del sito WKND e includere l'URL dell'immagine per i riferimenti alla risorsa immagine nel relativo campo primaryImage con una nuova query persistente wknd-shared/adventure-image-by-path definita come:

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

Variabili di query

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

La variabile $path utilizzata nel filtro _path richiede il percorso completo del frammento di contenuto (ad esempio /content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp).

_assetTransform definisce il modo in cui _dynamicUrl è costruito per ottimizzare il rendering dell'immagine fornita. Gli URL delle immagini ottimizzate per il web possono essere regolati anche sul client modificando i parametri di query dell’URL.

Risposta GraphQL

La risposta JSON risultante contiene i campi richiesti contenenti l’URL ottimizzato per il web per le risorse dell’immagine.

{
  "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"
        }
      }
    }
  }
}

Per caricare nell'applicazione l'immagine ottimizzata per il web dell'immagine di riferimento, ha utilizzato _dynamicUrl di primaryImage come URL di origine dell'immagine.

In React, la visualizzazione di un’immagine ottimizzata per il web da AEM Publish è simile alla seguente:

// 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}/>

Ricorda che _dynamicUrl non include il dominio AEM, pertanto devi fornire l'origine desiderata per la risoluzione dell'URL dell'immagine.

URL reattivi

L’esempio precedente mostra l’utilizzo di un’immagine in un’unica dimensione. Tuttavia, nelle esperienze web, spesso sono necessari set di immagini reattive. Le immagini reattive possono essere implementate utilizzando img srcsets o elementi immagine. Il seguente frammento di codice mostra come utilizzare _dynamicUrl come base. width è un parametro URL che puoi aggiungere a _dynamicUrl per attivare diverse visualizzazioni reattive.

// 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>`;

Esempio di React

Creiamo una semplice applicazione React che visualizza immagini ottimizzate per il web seguendo modelli di immagine reattiva. Esistono due modelli principali per le immagini reattive:

Elemento Img con set di immagini

Gli elementi immagine con srcset vengono utilizzati con l'attributo sizes per fornire risorse immagine diverse per schermi di dimensioni diverse. Le srcset di immagini sono utili quando si forniscono risorse di immagine diverse per schermi di dimensioni diverse.

Elemento immagine

Gli elementi immagine vengono utilizzati con più elementi source per fornire risorse immagine diverse per schermi di dimensioni diverse. Gli elementi immagine sono utili quando si forniscono rappresentazioni di immagini diverse per schermi di dimensioni diverse.

Esempio di codice

Questa app React semplice utilizza l'SDK AEM Headless per eseguire query sulle API AEM Headless per contenuti Adventure e visualizza l'immagine ottimizzata per il web utilizzando l'elemento img con srcset e l'elemento picture. srcset e sources utilizzano una funzione setParams personalizzata per aggiungere il parametro della query di consegna ottimizzata per il Web all'elemento _dynamicUrl dell'immagine, pertanto modificare il rendering dell'immagine consegnata in base alle esigenze del client Web.

La query contro l'AEM viene eseguita nell'hook React personalizzato useAdventureByPath che utilizza l'SDK headless dell'AEM.

// 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;