コマンドリファレンス — 設定属性

設定属性は、レスポンシブ画像ライブラリが管理するIMG要素で直接属性として定義されます。 各画像には、独自の属性セットを設定できます。

data-src

(オプション)

画像サービングが提供する画像のURL。 URLが存在しない場合、ライブラリはフォールバックとしてsrc属性に設定された値を使用します。 この属性は、レスポンシブ画像ライブラリが管理する初期画像と動的画像を様々な場所で提供します。

<img data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940">

src

data-srcが設定されている場合、srcはオプションで、追加する任意のURLを含めることができます。 例えば、ライブラリで使用されているのと同じ画像サービングベースの画像へのURLを含めることができます。 また、GIFプレースホルダーを含めたり、データURIを含めたりして、起動時に余分なサーバーのラウンドトリップを回避することもできます。

data-srcが設定されていない場合、srcは必須で、画像サービングが提供する画像のURLを含める必要があります。

src属性にデータURIを、data-src属性に画像サービングURLを使用します。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720,940">

data-breakpoints

ブレークポイントのカンマ区切りのリスト。オプションでコロン(:)と画像サービングコマンドまたは画像プリセットを付けます。 各ブレークポイントは、論理CSSピクセルで定義される画像の幅の値です。 ライブラリは、リストから最も近い大きい値で画像を読み込み、ランタイムCSS画像の幅に合わせてクライアント上で縮小します。 (高密度の画面で作業する場合、サーバから読み込まれた画像レンディションは、ブレークポイント値にデバイスのピクセル比を乗じた値を表します)。

リストの任意のブレークポイントに対して、1つ以上の画像サービングコマンドまたは画像プリセット名を定義できます。 このような追加のパラメーターは、この特定のブレークポイントが現在アクティブな場合にのみ、イメージに適用されます。

wid=hei=scl=など、応答画像のサイズに影響する表示コマンドを除き、サポートされている任意の画像サービングコマンドを使用できます。 画像プリセットにも同じ制限が適用されます。レスポンシブ画像ライブラリで使用される画像プリセットにこのようなコマンドを含めることはできません。

複数の画像サービングコマンドまたは画像プリセット名は、「&」文字で区切られます。 画像サービングコマンドの値にカンマが含まれている場合、このようなカンマは%2Cに置き換えられます。 画像プリセット名はドル記号($)で囲まれます。

ブレークポイントのみの使用

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360,720">

画像サービングコマンドの使用

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:op_sharpen=1,720:resMode=sharp2&op_usm=0.9%2C1.0%2C8%2C0">

画像プリセットの使用

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:$ResponsiveImage_Low$,940:$ResponsiveImage_High$">

画像プリセットおよび画像サービングコマンドの使用

<img src="https://s7d9.scene7.com/is/image/Scene7SharedAssets/Backpack_B" data-breakpoints="360:qlt=50,940:$ResponsiveImage_High$">

data-mode

AEM 6.4以降とDynamic Mediaビューア5.9以降では、次の2つのスマート切り抜きモードを使用できます。

  • 手動 — ユーザー定義のブレークポイントおよび対応する画像サービスコマンドは、画像要素の属性内で定義されます。
  • スマート切り抜き :計算済みのスマート切り抜きレンディションは、配信サーバから自動的に取得されます。最適なレンディションは、画像要素の実行時のサイズを使用して選択されます。

スマート切り抜きモードを使用するには、data-mode属性をsmart cropに設定します。

<img 
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
data-src="https://imageserver.com/is/image/ExampleCo/SmartCropAsset" 
data-mode="smartcrop">

関連付けられたイメージエレメントは、実行時にブレークポイントが変更されるとs7responsiveViewerイベントをディスパッチします。

         responsiveImage.addEventListener("s7responsiveViewer", function (event) { 
           var s7event = event.s7responsiveViewerEvent; 
           if(s7event.type == "breakpointchanged") { 
              console.log("New width: " + s7event.width); 
              console.log("Old width: " + s7event.oldWidth); 
           } 
        });

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now