変換設定を用いて画像フィールドをレンダリングする
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
SXAでは 、レスポンシブ画像フィールドを追加 して画像を正しく拡大・サイズ付けできます。Sitecore Content Hubを使っている場合、そこに設定された変換もSXA画像に使うことができます。そのためには、レスポンシブ画像バリアントのアイテム定義に使えるマッピングをSitecoreで作成する必要があります。
変換を設定します
画像の幅、高さ、画質を指定するには:
-
Sitecore Content Hubを開き、リボンの上で 「管理」をクリックします。
-
「設定」をクリックし、「**変換」**をクリックして画像の幅、高さ、品質を指定します。例えば:
変換マッピング項目を作成します
Sitecore Content Hubの各変換定義ごとに、変換マッピング項目を作成しなければなりません。
変換写像を追加するには:
-
コンテンツエディターで、以下へ移動してください:
/sitecore/system/Settings/Feature/Experience Accelerator/Stylelabs/、右クリックで変換、挿入、変換をクリックします。
-
名前を入力して **「OK」**をクリックします。
-
プロパティセクションのTransformation.Nameフィールドで、Sitecore Content Hubの変換名を入力します。
レンダリングバリアントの設定
レスポンシブ画像レンダリングのバリアントにマッピングを追加するには:
-
コンテンツエディターで、レンダリングバリアントのレスポンシブ画像項目をクリックします。
-
Stylelabsのバリアント詳細セクションのMWidthsフィールドで幅を指定します。左列で最大画像幅を指定し、右列で変換マッピング項目を選択します。
今、ページにレンダリングを追加し、データソースで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