Geoptimaliseerde afbeeldingen met AEM Headless images-with-aem-headless

De beelden zijn een kritisch aspect van ​ het ontwikkelen van rijke, dwingende AEM headless ervaringen ​. AEM Headless ondersteunt het beheer van afbeeldingselementen en de geoptimaliseerde levering ervan.

Inhoudsfragmenten die worden gebruikt in AEM Headless-inhoudsmodellering, verwijzen vaak naar afbeeldingselementen die zijn bedoeld voor weergave in de headless-ervaring. AEM GraphQL-query's kunnen worden geschreven om URL's aan te bieden voor afbeeldingen op basis van de locatie waar naar de afbeelding wordt verwezen.

Het type ImageRef heeft vier URL-opties voor inhoudsverwijzingen:

_dynamicUrl is de aanbevolen URL voor het leveren van afbeeldingselementen en moet, waar mogelijk, het gebruik van _path , _authorUrl en _publishUrl vervangen.

Inhoudsfragmentmodel

Verzeker het gebied van het Fragment van de Inhoud dat de beeldverwijzing bevat van het gegevenstype van de inhoudsverwijzing is.

De types van gebied worden herzien in het ​ Model van het Fragment van de Inhoud ​, door het gebied te selecteren, en het 3} lusje van Eigenschappen {op het recht te inspecteren.

GraphQL-query voortgezet

Retourneert het veld in de GraphQL-query als het ImageRef -type en vraagt het _dynamicUrl -veld aan. Bijvoorbeeld, die een avontuur in het ​ project van de Plaats van WKND ​ vragen en het omvatten beeld URL voor de verwijzingen van beeldactiva in zijn primaryImage gebied, kan met een nieuwe voortgeduurde vraag wknd-shared/adventure-image-by-path worden gedaan die als wordt bepaald:

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

Query-variabelen

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

Voor de variabele $path die in het filter _path wordt gebruikt, is het volledige pad naar het inhoudsfragment vereist (bijvoorbeeld /content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp ).

In _assetTransform wordt gedefinieerd hoe _dynamicUrl wordt samengesteld om de weergegeven afbeelding te optimaliseren. URL's met webgeoptimaliseerde afbeeldingen kunnen ook op de client worden aangepast door de queryparameters van de URL te wijzigen.

GraphQL-reactie

Het resulterende JSON-antwoord bevat de aangevraagde velden met de voor het web geoptimaliseerde URL naar de afbeeldingselementen.

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

Als u de webgeoptimaliseerde afbeelding van de referentieafbeelding in uw toepassing wilt laden, gebruikt u de _dynamicUrl van de primaryImage als bron-URL van de afbeelding.

In React ziet het weergeven van een webgeoptimaliseerde afbeelding in AEM Publish er als volgt uit:

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

Vergeet niet dat _dynamicUrl geen AEM-domein bevat. U moet dus de gewenste oorsprong opgeven voor de afbeeldings-URL die moet worden opgelost.

Responsieve URL's

In het bovenstaande voorbeeld ziet u hoe u een afbeelding van één formaat gebruikt, maar in webervaringen zijn responsieve afbeeldingssets vaak vereist. De responsieve beelden kunnen worden uitgevoerd gebruikend ​ img srcsets ​ of ​ beeldelementen ​. Het volgende codefragment laat zien hoe u de _dynamicUrl als basis kunt gebruiken. width is een URL-parameter die u vervolgens aan _dynamicUrl kunt toevoegen voor het inschakelen van verschillende responsieve weergaven.

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

Voorbeeld Reageren

Laten wij een eenvoudige React toepassing tot stand brengen die Web-geoptimaliseerde beelden na ​ ontvankelijke beeldpatronen ​ toont. Er zijn twee hoofdpatronen voor responsieve afbeeldingen:

Img-element met script

​ img elementen met srcset ​ worden gebruikt met het sizes attribuut om verschillende beeldactiva voor verschillende het schermgrootte te verstrekken. Img-sets zijn handig wanneer u verschillende afbeeldingselementen voor verschillende schermgrootten aanbiedt.

Figuurelement

​ de elementen van het Beeld ​ worden gebruikt met veelvoudige source elementen om verschillende beeldactiva voor verschillende het schermgrootte te verstrekken. Afbeeldingselementen zijn handig voor verschillende afbeeldingsuitvoeringen voor verschillende schermgrootten.

Voorbeeldcode

Deze eenvoudige React app gebruikt ​ AEM Headless SDK ​ om AEM Headless APIs voor een inhoud van het Avontuur te vragen, en toont het web-geoptimaliseerde beeld gebruikend ​ img element met srcset ​ en ​ beeldelement ​. De srcset en sources gebruiken een aangepaste setParams functie om de voor het web geoptimaliseerde leverquery-parameter toe te voegen aan _dynamicUrl van de afbeelding, dus wijzig de geleverde afbeeldingsuitvoering op basis van de behoeften van de webclient.

Het vragen tegen AEM wordt uitgevoerd in de haak van het douaneantwoord ​ useAdventureByPath die AEM Headless SDK ​ gebruikt.

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