We used cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. What For?

« Back to Blogs

Integrate Adaptive Media In Liferay Custom Portlet

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

Example:

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.

Add taglib in view.jsp

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.

Fetch Images using Adeptive Media Tag

Integrate Adaptive Media in Liferay Custom Portlet

contact-us Request a callback WhatsApp