アプリでの適応画像の表示
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
表示するには 画像に適した アプリに、適応型メディアはに便利なタグライブラリを提供しています モジュール com.liferay.adaptive.media.image.taglib。 このtaglibには、 fileVersionつの必須属性のみがあります。 この属性は、表示する適応画像のファイルバージョンを示します。 また、のような、必要に応じて多くの属性として追加することができます クラス、 スタイル、 データ・サンプルように、と。 追加した属性は、taglibがレンダリングするマークアップ内の適応画像に追加されます。
このチュートリアルの使用 適応型メディアサンプルアプリ どのようにこのタグライブラリを使用する方法を表示します。 このアプリは、ページに追加されると、現在のサイトのDocuments and Mediaアプリからのすべての適応画像を表示します。ただし、 適応メディア画像解像度 およびDocuments and Media画像が存在します。
taglibを使用するには、次の手順に従います。
-
モジュールtaglib依存関係をプロジェクトに含めます。 たとえば、Gradleを使用している場合、プロジェクトの
build.gradleファイルに次の行を追加する必要があります。provided group: "com.liferay", name: "com.liferay.adaptive.media.image.taglib", version: "1.0.0"たとえば、 はAdaptive Media Samplesアプリの
build.gradleファイル にこのtaglibが含まれています。 -
JSPでtaglibを宣言します。
<%@ taglib uri="http://liferay.com/tld/adaptive-media-image" prefix="liferay-adaptive-media" %>たとえば、 は、Adaptive Media Samplesアプリの
init.jspは、アプリが必要とするすべてのtaglibを宣言します。 -
アプリのJSPファイルで適応画像を表示する場合は、taglibを使用します。
<liferay-adaptive-media:img class="img-fluid" fileVersion="<%= fileEntry.getFileVersion() %>" />たとえば、 は、Adaptive Media Samplesアプリの
view.jspはtaglibを使用して、col-md-6列コンテナークラスグリッドに適応画像を表示します。 アプリが生成するマークアップを見ると、記事 適応画像を使用したコンテンツの作成説明されているように、<picture>タグを使用していることがわかります。
よくやった\！ これで、アプリで適応画像を表示する方法がわかりました。