1. レンダリングバリアント

変換設定を使用して画像フィールドをレンダリングする

Version:
日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

SXAでは、レスポンシブ イメージ フィールドを追加して 、画像を正しく拡大縮小し、サイズを調整できます。Sitecore Content Hubを使用している場合は、SXAイメージに設定された変換も使用できます。これを行うには、レスポンシブ イメージ バリアント アイテム定義で使用できるマッピングをSitecoreで作成する必要があります。

変換を設定する

画像の幅、高さ、品質を指定するには:

  1. Sitecore Content Hubを開き、リボンでManageをクリックします。

  2. 「 Settings」をクリックし、「 Transformations 」をクリックして、画像の幅、高さ、画質を指定します。例えば：

    Set the transformation settings.

変換マッピング項目を作成する

Sitecore Content Hubの変換定義ごとに、変換マッピング アイテムを作成する必要があります。

変換マッピングを追加するには:

  1. コンテンツ エディタで、次の場所に移動します。

    /sitecore/system/Settings/Feature/Experience Accelerator/Stylelabs/をクリックし、Transformationsを右クリックし、Insertをクリックして、Transformationをクリックします。

  2. 名前を入力してOkをクリックします。

  3. PropertiesセクションのTransformation.Nameフィールドに、Sitecore Content Hubからの変換名を入力します。

    In the Properties section you can enter the Content Hub transformation name.

レンダリングバリアントの設定

マッピングをレスポンシブ画像レンダリングバリアントに追加するには:

  1. コンテンツ エディタで、レンダリング バリアントの レスポンシブ画像 アイテムをクリックします。

  2. Stylelabs Variant DetailsセクションのMWidthsフィールドで、幅を指定します。左の列で画像の最大幅を指定し、右の列で変換マッピング項目を選択します。

    Specify image width and the mapping item.

    レンダリングをページに追加し、データソースでStylelabsの画像を選択し、MWidthマッピングでレンダリングバリアントを適用すると、変換設定が使用されます。

    画面サイズによって、読み込まれる画像が異なります。リンクは、変換マッピングのないリンクと似ていますが、変換名が割り当てられたサイズのパラメーター tが追加されます。例えば：

    https://portal.stylelabs.io/api/public/content/b5f64bb91cff4032804305c48961d688?v=b9b617a5&t=w320

    https://portal.stylelabs.io/api/public/content/b5f64bb91cff4032804305c48961d688?v=b9b617a5&t=w480

    https://portal.stylelabs.io/api/public/content/b5f64bb91cff4032804305c48961d688?v=b9b617a5

この記事を改善するための提案がある場合は、 お知らせください!