Liferay provides a way to choose the best content for the right device with adaptive media. Liferay has introduced adaptive media as an external app on Liferay 7 after that Liferay includes Adaptive media in Liferay 7.1.
In the previous article, we have seen that what is adaptive media? What is the use of adaptive media? How to install Adaptive media in Liferay 7?
Liferay manages all blog and web content images through adaptive media if you have installed adaptive media on your Liferay portal.
In this article, we will include How to integrate adaptive media in a custom portlet. We also gave an example to handle images through adaptive media in a portlet.
Adaptive Media offers a convenient tag lib to handle images. Adaptive media has an only fileVersion attribute that is mandatory for displaying adaptive images. You can also use attributes like class, style, data-sample and so on.
How to Integrate Adaptive media in Liferay custom portlet?
Note: If you are using Liferay 7 / DXP then you need to Install adaptive media in your Liferay.
Check out the article to Install adaptive media in Liferay 7 / DXP
1. First of all, you need to add a dependency in your build.gradle file of a custom portlet.
provided group: "com.liferay", name: "com.liferay.adaptive.media.image.taglib", version: "1.0.0"
2. Now you need to add taglib in your jsp
<%@ taglib uri="http://liferay.com/tld/adaptive-media-image" prefix="liferay-adaptive-media" %>
3. Use taglib in replacement of image tag.
<liferay-adaptive-media:img class="img-fluid" fileVersion="<%= fileEntry.getFileVersion() %>" />
4. You can see all images of your custom portlet be adaptive.
5. You can also use adaptive media service to fetch images based on width, height, order, etc
We have created one portlet and integrate adaptive media on it. So We have used adaptive media taglib for all portlet images.
In our portlets, we are displaying selected images. For displaying images we need to add taglib in jsp so, we have added taglib in view.jsp. You can check in the below image.
Apart from that, we need to fetch fileEntry and use taglib to display images. Below you can see that we are using an adaptive media tag instead of img tag.
For professional paid support, you may contact us at