レスポンシブ画像バリアントを使って画像フィールドをレンダリングする
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
画像をレスポンシブにするということは、ブラウザがページ上の画像のサイズや画面解像度に応じて異なるサイズの画像をダウンロード・表示することを意味します。標準のレンダリングバリアントフィールドを使う代わりに、レスポンシブ画像フィールドを使ってスケーリングやサイズの条件を追加できます。SXAでは、メディアアイテムへの汎用リンクを使ってページ上の画像をレンダリングすることもできます。レスポンシブイメージバリアントフィールドでは、メディアアイテムから直接コンテンツをレンダリングできます。このフィールドでは、画像のデフォルトサイズや追加のサイズや幅を定義できます。
画像フィールドをレンダリングします
スケーリングとサイズ調整用の レスポンシブ画像 フィールドを追加するには:
- レンダリングバリアントを追加してください。
- バリアントを右クリックし、「 挿入」をクリックし、「 レスポンシブ画像」をクリックします。
- バリアント詳細セクションでは、画像のデフォルトサイズを定義できます。
レスポンシブ画像バリアントフィールドでは、以下を指定できます:
-
フィールド名 – 画像へのリンクを含むフィールド名。
-
サイズ – 画面幅を定義し、その幅に最適な画像サイズを示します。例えば、(max-width: 320px) 280px, (max-width: 480px) 440px, 800px入力すると、 属性に描画されます:
<img src="/-/media/Project/Tenant/Site/26056130_2115225655366272_5152181870065454436_n/MyImage.JPEG?w=400&hash=C54AFF8A74289E7B0A776137DFF1D4F89DDEFF93" alt="Simple description of the image" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
-
幅 – コンマ区切られた整数リストに幅を入力します。例えば: 320, 480, 800.
-
デフォルトサイズ – 指定されている場合、そのサイズは "src" パラメータのパラメータとして加えられます。空のままにすると、画像は元のサイズでレンダリングされます。
バリアント詳細セクションに入力された値はsrcset属性で統合されます。以下のバリアント詳細セクションのスクリーンショットの値は、以下のimgタグを生成します。
リンクフィールド内の複数の画像をレンダリングする
レスポンシブ画像バリアントフィールドは、入れ子子状フィールドを扱うことを可能にします。例えば、製品が載ったページがあり、それらの製品ごとに異なるサイズの画像が存在する場合です。メディアアイテムにリンクできるフィールド、参照フィールド、レスポンシブイメージバリアントフィールドを使うことで、複数の画像を同じサイズにレンダリングできます。
複数の画像を自動サイズ化するには:
-
ページテンプレートに マルチリスト または マルチルートツリーリスト フィールドを追加してください。
-
ソースフィールドにクエリを入力して、欲しい画像を集めます。例えば、query:$siteMediaサイトのバーチャルメディアフォルダへのリンクを貼ります。
-
レンダリング画像を使いたいコンポーネントのレンダリングバリアントを作成します。バリアントを追加したいレンダリングを右クリックし、「 挿入」→「 バリアント定義」をクリックします。
-
名前を入力してOKをクリックします。
-
表示するフィールドを定義するには、レンダリングバリアントに子項目を追加できます。バリアントを右クリックし、「 挿入」をクリックし、「 参照」をクリックします。
-
パススルーフィールドは、入れ子された項目からフィールド名を定義します。バリアント詳細セクションのパススルーフィールドで、ページテンプレートのマルチリストまたはマルチルートツリーリストフィールドで入力した名前を入力します。
-
ステップ5で作成した参照項目を右クリックし、「 挿入」をクリックし、「 レスポンシブ画像」をクリックします。
-
バリアント詳細セクションでは、画像のデフォルトサイズを定義できます。例えば、デフォルトサイズフィールドに400を入力すると、ページの画像はすべてデフォルトサイズ400になります。
