レスポンシブ画像バリアントを使用して画像フィールドをレンダリングする
画像をレスポンシブにするということは、ページ上の画像のサイズと画面解像度に基づいて、ブラウザーがその画像の異なるサイズのバージョンをダウンロードしてレンダリングすることを意味します。標準のレンダリング バリアントである [フィールド] を画像に対して使用する代わりに、"レスポンシブ画像" フィールドを使用して倍率とサイズの基準を追加できます。SXA では、メディア アイテムへの汎用リンクを使用して、ページで画像をレンダリングすることもできます。"レスポンシブ画像" のバリアント フィールドを使用すると、メディア アイテムから直接コンテンツをレンダリングできます。このフィールドでは、デフォルト サイズを定義でき、追加で画像のサイズと幅も定義できます。
画像フィールドをレンダリングする
倍率とサイズを設定する "レスポンシブ画像" フィールドを追加するには:
-
バリアントを右クリックし、[挿入] をクリックし、[レスポンシブ画像] をクリックします。
-
[バリアント 詳細] セクションで、画像のデフォルト サイズを定義できます。
"レスポンシブ画像" のバリアント フィールドでは、次を指定できます。
-
[フィールド名] - 画像へのリンクを含むフィールドの名前。
-
[サイズ] - 画面幅を定義し、その画面幅に最適な画像サイズを示します。たとえば、「
(max-width: 320px) 280px, (max-width: 480px) 440px, 800px
」と入力すると、これは<img sizes="">
属性で次のようにレンダリングされます。RequestResponseshell<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
タグを生成します。
リンク フィールドで複数の画像をレンダリングする
"レスポンシブ画像" のバリアント フィールドを使用すると、ネストされたフィールドを操作できます。たとえば、商品のページがあり、それらの商品によって異なる数のさまざまなサイズの画像がある場合などです。メディア アイテム、参照フィールド、"レスポンシブ画像" のバリアント フィールドにリンクできるフィールドを使用すると、複数の画像を同じサイズにレンダリングできます。
複数の画像のサイズを自動調整するには:
-
"Multilist" または "マルチルート ツリーリスト" フィールドをページ テンプレートに追加します。
-
"ソース" フィールドにクエリを入力して、必要な画像を収集します。たとえば、
query:$siteMedia
でサイトの仮想メディア フォルダーにリンクします。 -
レンダリング イメージを使用するコンポーネントのレンダリング バリアントを作成します。バリアントを追加するレンダリングを右クリックし、[挿入]、[バリアント定義] の順にクリックします。
-
名前を入力して、[OK] をクリックします。
-
表示するフィールドを定義するには、子アイテムをレンダリング バリアントに追加します。バリアントを右クリックして、[挿入]、[参照] の順にクリックします。
-
[パススルー フィールド] には、ネストされたアイテムのフィールドの名前を定義します。[バリアント 詳細] セクションの [パススルー フィールド] に、ページ テンプレートの "Multilist" または "マルチルート ツリーリスト" フィールドに入力した名前を入力します。
-
手順 5 で作成した参照アイテムを右クリックし、[挿入]、[レスポンシブ画像] の順にクリックします。
-
[バリアント詳細] セクションで、画像のデフォルト サイズを定義できます。たとえば、"デフォルト サイズ" フィールドで「400」と入力すると、そのページの画像のデフォルト サイズはすべて 400 になります。