To display
adapted images
in your apps, Adaptive Media offers a convenient taglib in
the module com.liferay.adaptive.media.image.taglib
.
This taglib only has one mandatory attribute: fileVersion
. This attribute
indicates the file version of the adapted image that you want to display. You
can also add as many attributes as needed, such as class
, style
,
data-sample
, and so on. Any attributes you add are then added to the adapted
images in the markup the taglib renders.
This tutorial uses the Adaptive Media Samples app to show you how to use this taglib. When added to a page, this app displays all the adapted images from the current site’s Documents and Media app, provided that Adaptive Media image resolutions and Documents and Media images exist.
Follow these steps to use the taglib:
-
Include the module taglib dependency in your project. If you’re using Gradle, for example, you must add the following line in your project’s
build.gradle
file:provided group: "com.liferay", name: "com.liferay.adaptive.media.image.taglib", version: "1.0.0"
For example, the Adaptive Media Samples app’s
build.gradle
file contains this taglib. -
Declare the taglib in your JSP:
<%@ taglib uri="http://liferay.com/tld/adaptive-media-image" prefix="liferay-adaptive-media" %>
For example, the Adaptive Media Samples app’s
init.jsp
declares all the taglibs the app needs. -
Use the taglib wherever you want the adapted image to appear in your app’s JSP files:
<liferay-adaptive-media:img class="img-fluid" fileVersion="<%= fileEntry.getFileVersion() %>" />
For example, the Adaptive Media Samples app’s
view.jsp
uses the taglib to display the adapted images in a grid with thecol-md-6
column container class. Looking at the markup the app generates, you can see that it uses the<picture>
tag as described in the article Creating Content with Adapted Images.Figure 1: The Adaptive Media Samples app shows all the site's adapted images.
Well done! Now you know how to display adapted images in your app.