サイトコンテンツでの適用された画像の使用

アダプティブメディアはバックグラウンドで動作し、Liferay DXPにアップロードする画像用にさまざまな解像度を作成します。 ブログ、Webコンテンツ、およびコンテントページの作成者がこれらの画像を使用する場合、アダプティブメディアは対象となる画面サイズに最適な解像度を自動的に選択します。 アダプティブ・メディアは、コンテンツのHTML内の各アダプテッド画像を、data-fileentryid属性で識別し、ユーザーがコンテンツを閲覧する際に、最新のアダプテッド画像に置き換えます。 これにより、アダプティブメディアは、コンテンツがそれらの画像の前に存在していた場合でも、最新の適用された画像をコンテンツに配信できます。

note

画像のアダプティブ・メディアを無効にする 画像のアダプティブ・メディアを無効にした場合、オリジナルの画像がブログ・エントリー、ウェブ・コンテンツ記事、コンテンツ・ページに表示されます。

適用された画像をコンテンツに含める

コンテントページに画像を追加する 場合、アダプティブメディアは、ユーザーが直接選択した画像とマッピングされた画像に対して機能します。 ブログまたはウェブコンテンツで画像をアップロードする場合、アダプティブメディアは、 ブログ画像 、 ドキュメントとメディア 、 アップロード タブから追加した画像に対してのみ機能します。 さらに、適用された画像はブログエントリーのコンテンツにのみ適用でき、カバー画像には適用できません。 アダプティブメディアは、ドラッグアンドドロップでブログエントリーに追加された画像に対して機能します。画像はブログ画像リポジトリに自動的にアップロードされ、適応されてから、ブログエントリーのコンテンツに含まれます。 HTMLをチェックして、画像に<img>タグとdata-fileentryid属性が含まれていることを確認すればわかる。

ウェブコンテンツ記事の場合、アダプティブメディアはファイルセレクタの ドキュメントとメディア タブから追加されたイメージに対してのみ機能します。 ブログとは異なり、アダプティブメディアは、ドラッグアンドドロップでWebコンテンツ記事に追加された画像には適用された画像を配信しません。

ブログエントリーとメディアコンテンツ記事の両方で、アダプティブメディアはファイルセレクタの URL タブから追加した画像では動作しません。 これは、画像がURLから直接リンクされているため、アダプティブメディアがコピーする画像ファイルが提供されないためです。

<img>タグとdata-fileentryid属性は、ブログのエントリーやウェブコンテンツの記事を書いているときにHTMLで見ることができます。 コンテンツが表示されると、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ファイルに含まれます。 そうすれば、元の画像と一緒に取り込むことができます。

パフォーマンスを向上させるため、アダプティブメディアは、パブリッシングやエクスポート/インポート時に既存のアダプティブイメージを再利用します。

関連トピック

• 画像解像度の追加