サイトコンテンツでの適用された画像の使用
Adaptive Media はバックグラウンドで動作し、Liferay DXP にアップロードされた画像に対して複数の解像度を作成します。 ブログ、Web コンテンツ、コンテンツ ページで使用する場合、対象の画面サイズに基づいて最適な解像度が自動的に選択されます。 これらの適応された画像をコンテンツに含める方法を理解することは、パフォーマンスを最適化するために不可欠です。
適応された各画像は、HTML 内で data-fileentryid 属性によって識別され、コンテンツを表示すると最新の適応された画像に更新されます。 これにより、以前に作成されたコンテンツでも、最新の適応された画像が表示されるようになります。
画像の Adaptive Media を無効にすると、ブログエントリ、Web コンテンツ記事、コンテンツ ページには元の画像が表示されます。
適用された画像をコンテンツに含める
コンテンツ ページに画像を追加する場合、Adaptive Media は直接選択された画像とマップされた画像の両方をサポートします。 ブログと Web コンテンツでは、 ブログ画像、 ドキュメントとメディア、および アップロード タブから追加された画像にのみ適用されます。
適応された画像はブログエントリのコンテンツにのみ適用でき、カバー画像には適用できません。
ドラッグ アンド ドロップでブログ エントリに追加された画像は、ブログ画像リポジトリに自動的にアップロードされ、調整されて、ブログ エントリのコンテンツに組み込まれます。 これは HTML を調べることで確認できます。画像には <img> タグと data-fileentryid 属性が含まれています。
Web コンテンツ記事の場合、Adaptive Media はファイル セレクターの [ドキュメントとメディア] タブから追加された画像でのみ機能します。 ブログとは異なり、アダプティブメディアは、ドラッグアンドドロップでWebコンテンツ記事に追加された画像には適用された画像を配信しません。
アダプティブ メディアは、ブログ エントリとメディア コンテンツ記事の両方のファイル セレクターの URL タブから追加された画像では機能しません。 これは、画像が URL から直接リンクされており、Adaptive Media がコピーする画像ファイルが提供されていないためです。
ブログエントリーまたはWebコンテンツ記事のHTMLには、書き込み中に<img>タグとdata-fileentryid属性が表示されます。 コンテンツが表示されると、HTML は自動的に置き換えられ、次のようになります。
<picture>
<source media="(max-width:850px)" srcset="/o/adaptive-media/image/44147/med/photo.jpeg">
<source media="(max-width:1200px) and (min-width:850px)" srcset="/o/adaptive-media/image/44147/hd/photo.jpeg">
<source media="(max-width:2000px) and (min-width:1200px)" srcset="/o/adaptive-media/image/44147/ultra-hd/photo.jpeg">
<img src="/documents/20140/0/photo.jpeg/1992-9143-85d2-f72ec1ff77a0">
</picture>
この例では、解像度がそれぞれ異なる3つの異なる画像を使用しています。 sourceタグは、これらの各画像を定義します。 また、元の画像（img）は、適用された画像が利用できない場合のフォールバックとして使用されることに注意してください。
構造化されたWebコンテンツでの適用された画像の使用
構造化 Web コンテンツで適応された画像を使用するには、コンテンツ作成者が Web コンテンツの構造に画像フィールドを手動で含める必要があります。 その後、エディターの左側にある画像フィールドを選択することで、一致するテンプレートでその画像フィールドを参照することができます。 テンプレートに含まれているImagecrrfという名前の画像フィールドのスニペットの例を次に示します。
<#if Imagecrrf.getData()?? && Imagecrrf.getData() !="">
<img data-fileentryid="${Imagecrrf.getAttribute("fileEntryId")}" alt="${Imagecrrf.getAttribute("alt")}" src="${Imagecrrf.getData()}" />
</#if>
このスニペットには、アダプティブメディアが画像を適用された画像に確実に置き換えるためのdata-fileentryid属性が含まれています。 結果のWebコンテンツのHTMLをエディターのコードビューで調べると、次のようなタグが表示されます。
<img data-fileentryid="37308" src="/documents/20143/0/photo.jpeg/85140258-1c9d-89b8-4e45-d79d5e262318?t=1518425" />
<img> タグと data-fileentryid 属性に注意してください。 アダプティブメディアは、ファイルエントリーIDを使用して、<img>要素を各解像度で使用可能な適用された画像を含む<picture>要素に自動的に置き換えます（上記の<picture>の例を参照）。
適用された画像のステージング
Adaptive Media は、Liferay の コンテンツ ステージング および エクスポート/インポート 機能と統合されています。 適応された画像は、公開時にステージングされたコンテンツに含まれます。
同様に、適応された画像を含むコンテンツをエクスポートすると、それらの画像が LAR ファイルに含まれます。 その後、元の画像と一緒にインポートできます。
パフォーマンスを向上させるために、Adaptive Media は、公開およびエクスポート/インポート時に既存の適応済み画像を再利用します。