AEM Headless로 최적화된 이미지

이미지는 의 중요한 측면입니다. 풍부하고 매력적인 AEM Headless 경험 개발. AEM Headless는 이미지 에셋 관리 및 최적화된 전달을 지원합니다.

AEM Headless 콘텐츠 모델링에 사용된 콘텐츠 조각은 종종 Headless 경험에 표시되기 위한 이미지 에셋을 참조합니다. AEM GraphQL 쿼리를 작성하여 이미지를 참조하는 위치에 따라 이미지에 URL을 제공할 수 있습니다.

다음 ImageRef 유형에는 컨텐츠 참조에 대한 네 가지 URL 옵션이 있습니다.

• _path 는 AEM에서 참조된 경로이며 AEM 원본(호스트 이름)을 포함하지 않습니다
• _dynamicUrl 는 웹에 최적화된 기본 이미지 에셋의 전체 URL입니다.
  • 다음 _dynamicUrl 은 AEM Origin을 포함하지 않으므로 도메인(AEM 작성자 또는 AEM Publish 서비스)은 클라이언트 애플리케이션에서 제공해야 합니다.
• _authorUrl 는 AEM 작성자의 이미지 에셋에 대한 전체 URL입니다
  • AEM 작성자 는 headless 애플리케이션의 미리보기 경험을 제공하는 데 사용할 수 있습니다.
• _publishUrl 는 AEM 게시의 이미지 에셋에 대한 전체 URL입니다
  • AEM 게시 는 일반적으로 headless 애플리케이션의 프로덕션 배포에서 의 이미지를 표시하는 위치입니다.

다음 _dynamicUrl 는 이미지 에셋에 사용할 기본 URL이며 을 사용해야 합니다. _path, _authorUrl, 및 _publishUrl 가능한 한.

콘텐츠 조각 모델

이미지 참조가 포함된 콘텐츠 조각 필드가 인지 확인합니다. 콘텐츠 참조 데이터 유형.

필드 유형은 다음에서 검토됩니다. 콘텐츠 조각 모델, 필드를 선택하고 속성 오른쪽의 탭입니다.

GraphQL 지속 쿼리

GraphQL 쿼리에서 필드를 로 반환합니다. ImageRef 을(를) 입력하고 다음을 요청합니다. _dynamicUrl 필드. 예를 들어 의 모험을 쿼리하는 경우 WKND 사이트 프로젝트 및 이미지 에셋 참조에 대한 이미지 URL 포함 primaryImage 새 지속 쿼리로 수행할 수 있는 필드입니다. wknd-shared/adventure-image-by-path 다음으로 정의됨:

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

쿼리 변수

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

다음 $path 에 사용되는 변수 _path 필터에는 콘텐츠 조각의 전체 경로가 필요합니다(예: /content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp).

다음 _assetTransform 은(는) _dynamicUrl 는 제공된 이미지 렌디션을 최적화하도록 구성됩니다. URL의 쿼리 매개 변수를 변경하여 웹에 최적화된 이미지 URL을 클라이언트에서 조정할 수도 있습니다.

GraphQL 응답

결과 JSON 응답에는 이미지 자산에 대한 웹에 최적화된 URL이 포함된 요청된 필드가 포함되어 있습니다.

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

참조된 이미지의 웹에 최적화된 이미지를 응용 프로그램에서 로드하려면 _dynamicUrl / primaryImage 를 이미지의 소스 URL로 사용하십시오.

React에서 AEM 게시에서 웹에 최적화된 이미지를 표시하는 모습은 다음과 같습니다.

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

기억해, _dynamicUrl 은 AEM 도메인을 포함하지 않으므로 확인할 이미지 URL에 대해 원하는 원본을 제공해야 합니다.

응답형 URL

위의 예는 단일 크기 이미지를 사용하는 것을 보여주지만, 웹 경험에서는 응답형 이미지 세트가 필요한 경우가 많습니다. 응답형 이미지는 다음을 사용하여 구현할 수 있습니다. srcsets 또는 그림 요소. 다음 코드 스니펫은 _dynamicUrl 를 기반으로 다른 폭 매개 변수를 추가하여 다른 반응형 보기를 지원합니다. 다음을 수행할 수 있을 뿐만 아니라 width 쿼리 매개 변수를 사용할 수 있지만, 클라이언트가 필요에 따라 이미지 에셋을 추가로 최적화하기 위해 다른 쿼리 매개 변수를 추가할 수 있습니다.

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

React 예

웹에 최적화된 이미지를 표시하는 간단한 React 응용 프로그램을 만들어 보겠습니다. 반응형 이미지 패턴. 반응형 이미지에는 두 가지 기본 패턴이 있습니다.

• srcset가 있는 Img 요소 성능 향상
• 그림 요소 디자인 컨트롤용

srcset가 있는 Img 요소

srcset가 있는 Img 요소 와 함께 사용됩니다. sizes 속성이 다른 화면 크기에 대해 다른 이미지 에셋을 제공합니다. 이미지 세트는 다양한 화면 크기에 대해 다양한 이미지 에셋을 제공할 때 유용합니다.

그림 요소

그림 요소 은 여러 와 함께 사용됩니다. source 요소는 다양한 화면 크기에 다양한 이미지 에셋을 제공합니다. 그림 요소는 다양한 화면 크기에 대해 다양한 이미지 렌디션을 제공할 때 유용합니다.

예제 코드

이 간단한 React 앱은 AEM Headless SDK AEM Headless API에 어드벤처 콘텐츠를 쿼리하고 다음을 사용하여 웹에 최적화된 이미지를 표시합니다. srcset가 있는 img 요소 및 그림 요소. 다음 srcset 및 sources 사용자 지정 사용 setParams 웹에 최적화된 게재 쿼리 매개 변수를 추가하는 함수 _dynamicUrl 따라서 웹 클라이언트의 요구 사항에 따라 전달되는 이미지 렌디션을 변경합니다.

AEM에 대한 쿼리는 사용자 지정 React 후크에서 수행됩니다 AEM Headless SDK를 사용하는 useAdventureByPath.

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

Business.Adobe.com 리소스