画像 (AEMヘッドレス )

画像は、 豊富で魅力的なAEMヘッドレスエクスペリエンスの開発. AEMヘッドレスは、画像アセットの管理と、その最適化された配信をサポートします。

AEMヘッドレスコンテンツモデリングで使用されるコンテンツフラグメントは、多くの場合、ヘッドレスエクスペリエンスでの表示を目的とした画像アセットを参照します。 AEM GraphQL クエリを記述して、画像の参照元に基づいて画像に URL を提供できます。

この ImageRef タイプにはコンテンツ参照用の 3 つの URL オプションがあります。

  • _path はAEMで参照されているパスで、AEM origin(ホスト名)は含まれていません
  • _authorUrl は、AEM オーサー上の画像アセットの完全な URL です
    • AEM オーサー は、ヘッドレスアプリケーションのプレビューエクスペリエンスを提供するために使用できます。
  • _publishUrl は、AEM パブリッシュ上の画像アセットの完全な URL です。
    • AEM パブリッシュ は、通常、ヘッドレスアプリケーションの実稼動デプロイメントで画像が表示される場所です。

これらのフィールドは、次の条件に基づいて使用するのが最適です。

ImageRef フィールド AEMから提供されるクライアント Web アプリ クライアントアプリが AEM オーサーに対してクエリを実行 クライアントアプリが AEM Publish をクエリ
_path ✔ (アプリは URL でホストを指定する必要があります) ✔ (アプリは URL でホストを指定する必要があります)
_authorUrl
_publishUrl

の使用 _authorUrl および _publishUrl は、GraphQL 応答のソースに使用されるAEM GraphQL エンドポイントと一致する必要があります。

コンテンツフラグメントモデル

画像参照を含む「コンテンツフラグメント」フィールドが コンテンツ参照 データタイプ。

フィールドタイプについては、 コンテンツフラグメントモデル、フィールドを選択し、 プロパティ 」タブを右にクリックします。

画像へのコンテンツ参照を含むコンテンツフラグメントモデル

GraphQL 永続クエリ

GraphQL クエリで、フィールドを ImageRef 適切なフィールドを入力し、リクエストします。 _path, _authorUrlまたは _publishUrl アプリケーションで必要です。 例えば、 WKND 参照デモプロジェクト 画像アセット参照用の画像 URL をその中に含める primaryImage フィールドに入力し、新しい永続化クエリで実行できます wknd-shared/adventure-image-by-path 次のように定義されます。

query ($path: String!) {
  adventureByPath(_path: $path) {
    item {
      title,
      primaryImage {
        ... on ImageRef {
          _path
          _authorUrl
          _publishUrl
        }
      }
    }
  }
}

この $path 変数 _path フィルターにはコンテンツフラグメントへの完全パスが必要です ( 例: /content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp) をクリックします。

GraphQL の応答

結果の JSON 応答には、画像アセットへの URL を含むリクエストされたフィールドが含まれます。

{
  "data": {
    "adventureByPath": {
      "item": {
        "adventurePrimaryImage": {
          "_path": "/content/dam/wknd-shared/en/adventures/bali-surf-camp/adobestock-175749320.jpg",
          "_authorUrl": "https://author-p123-e456.adobeaemcloud.com/content/dam/wknd-shared/en/adventures/bali-surf-camp/adobestock-175749320.jpg",
          "_publishUrl": "https://publish-p123-e789.adobeaemcloud.com/content/dam/wknd-shared/en/adventures/bali-surf-camp/adobestock-175749320.jpg"
        }
      }
    }
  }
}

参照元の画像をアプリケーションに読み込むには、適切なフィールドを使用します。 _path, _authorUrlまたは _publishUrladventurePrimaryImage を画像のソース URL として設定します。

のドメイン _authorUrl および _publishUrl は、AEM as a Cloud Serviceで Externalizer.

React では、AEM Publish からの画像の表示は次のようになります。

<img src={ data.adventureByPath.item.primaryImage._publishUrl } />

画像レンディション

画像アセットはカスタマイズ可能をサポートします レンディション:元のアセットの代替表現です。 カスタムレンディションは、ヘッドレスエクスペリエンスの最適化に役立ちます。 大きな高解像度ファイルである場合が多い元の画像アセットを要求する代わりに、ヘッドレスアプリケーションから最適化されたレンディションを要求することができます。

レンディションの作成

AEM Assets管理者は、処理プロファイルを使用してカスタムレンディションを定義します。 その後、処理プロファイルを特定のフォルダーツリーまたはアセットに直接適用して、それらのアセットのレンディションを生成できます。

処理プロファイル

アセットレンディションの仕様は、 処理プロファイル AEM Assets管理者による

処理プロファイルを作成または更新し、ヘッドレスアプリケーションで必要な画像サイズのレンディション定義を追加します。 レンディションには任意の名前を付けることができますが、意味的に名前を付ける必要があります。

ヘッドレスに最適化されたレンディションのAEM

この例では、3 つのレンディションが作成されます。

レンディション名 拡張子 最大幅
web-optimized-large webp 1200 px
web-optimized-medium webp 900 px
web-optimized-small webp 600 px

上記の表で呼び出される属性は重要です。

  • レンディション名 を使用してレンディションを要求します。
  • 拡張 は、 レンディション名. 優先 webp レンディションは Web 配信用に最適化されているので、
  • 最大幅 は、ヘッドレスアプリケーションでの使用に基づいて使用するレンディションを開発者に知らせるために使用されます。

レンディションの定義はヘッドレスアプリケーションのニーズに応じて異なるので、使用例に合わせて最適なレンディションセットを定義し、その使用方法に関する意味的な名前を付けてください。

アセット再処理ワークフロー(その )

処理プロファイルを作成(または更新)した状態で、アセットを再処理して、処理プロファイルで定義された新しいレンディションを生成します。 アセットが処理プロファイルで処理されるまで、新しいレンディションは存在しません。

  • 好ましくは、 フォルダーに処理プロファイルを割り当てました したがって、そのフォルダーに新しいアセットがアップロードされると、レンディションが自動的に生成されます。 既存のアセットは、以下のアドホックアプローチを使用して再処理する必要があります。

  • または、フォルダーまたはアセットを選択し、「 アセットを再処理​をクリックし、新しい処理プロファイル名を選択します。

    アセットのアドホック再処理

レンディションのレビュー

レンディションは、 アセットのレンディション表示を開くをクリックし、レンディションパネルでプレビューする新しいレンディションを選択します。 レンディションが見つからない場合、 アセットが処理プロファイルを使用して処理されていることを確認する.

レンディションの確認

アセットを公開します。

新しいレンディションを持つアセットが (再公開済み) したがって、AEM パブリッシュ上で新しいレンディションにアクセスできます。

レンディションへのアクセス

レンディションには、 レンディション名 および レンディション拡張 アセットの URL に対する処理プロファイルで定義されます。

アセット URL レンディションサブパス レンディション名 レンディション拡張 レンディション URL
https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg /_jcr_content/renditions/ web-optimized-large .webp https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg/_jcr_content/renditions/web-optimized-large.webp
https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg /_jcr_content/renditions/ web-optimized-medium .webp https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg/_jcr_content/renditions/web-optimized-medium.webp
https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg /_jcr_content/renditions/ web-optimized-small .webp https://publish-p123-e789.adobeaemcloud.com/content/dam/example.jpeg/_jcr_content/renditions/web-optimized-small.webp

GraphQL クエリ

AEM GraphQL では、画像レンディションを要求するための追加の構文が必要です。 代わりに 画像に対する問い合わせ 通常の方法で、目的のレンディションをコード内で指定します。 ~することが重要である。 ヘッドレスアプリケーションで使用される画像アセットに同じ名前のレンディションがあることを確認する.

React の例

1 つの画像アセットの 3 つのレンディション (Web-optimized-small、Web-optimized-medium、Web-optimized-large) を表示する単純な React アプリケーションを作成します。

画像アセットレンディション React の例

画像コンポーネントを作成

画像をレンダリングする React コンポーネントを作成します。 このコンポーネントは、次の 4 つのプロパティを受け入れます。

  • assetUrl:GraphQL クエリの応答で提供される画像アセットの URL。
  • renditionName:読み込むレンディションの名前。
  • renditionExtension:読み込むレンディションの拡張。
  • alt:画像の代替テキスト。アクセシビリティが重要です。

このコンポーネントは、 レンディション URL ( レンディションへのアクセス. An onError ハンドラーは、レンディションが見つからない場合に元のアセットを表示するように設定されます。

この例では、元のアセット URL を onError ハンドラー、イベント内にレンディションが見つかりません。

// src/Image.js

export default function Image({ assetUrl, renditionName, renditionExtension, alt }) {
  // Construct the rendition Url in the format:
  //   <ASSET URL>/_jcr_content/renditions<RENDITION NAME>.<RENDITION EXTENSION>
  const renditionUrl = `${assetUrl}/_jcr_content/renditions/${renditionName}.${renditionExtension}`;

  // Load the original image asset in the event the named rendition is missing
  const handleOnError = (e) => { e.target.src = assetUrl; }

  return (
    <>
      <img src={renditionUrl}
            alt={alt}
            onError={handleOnError}/>
    </>
  );
}

次を定義: App.js

このシンプルな App.js アドベンチャー画像をAEMに問い合わせて、その画像の 3 つのレンディションを表示します。web-optimized-small、web-optimized-medium および web-optimized-large。

AEMに対するクエリは、カスタム React フックで実行されます。 AEMヘッドレス SDK を使用する useAdventureByPath.

クエリの結果と特定のレンディションパラメーターが 画像 React コンポーネント.

// src/App.js

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

function App() {

  // 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
  let { data, error } = useAdventureByPath("/content/dam/wknd-shared/en/adventures/bali-surf-camp/bali-surf-camp");

  // Wait for GraphQL to provide data
  if (!data) { return <></> }

  return (
    <div className="app">

      <h2>Small rendition</h2>
      {/* Render the web-optimized-small rendition for the Adventure Primary Image */}
      <Image
        assetUrl={data.adventureByPath.item.primaryImage._publishUrl}
        renditionName="web-optimized-small"
        renditionExtension="webp"
        alt={data.adventureByPath.item.title}
      />

      <hr />

      <h2>Medium rendition</h2>
      {/* Render the web-optimized-medium rendition for the Adventure Primary Image */}
      <Image
        assetUrl={data.adventureByPath.item.primaryImage._publishUrl}
        renditionName="web-optimized-medium"
        renditionExtension="webp"
        alt={data.adventureByPath.item.title}
      />

      <hr />

      <h2>Large rendition</h2>
      {/* Render the web-optimized-large rendition for the Adventure Primary Image */}
      <Image
        assetUrl={data.adventureByPath.item.primaryImage._publishUrl}
        renditionName="web-optimized-large"
        renditionExtension="webp"
        alt={data.adventureByPath.item.title}
      />
    </div>
  );
}

export default App;

このページ