Submit Feedback
Legacy Knowledge Base
Published Jul. 2, 2025

Rendering Adapted Images in a Web Content Article Using Asset Publisher with Custom Display Template

Written By

Laura Li

How To articles are not official guidelines or officially supporteddocumentation. They are community-contributed content and may not alwaysreflect the latest updates to Liferay DXP. We welcome your feedback toimprove How to articles!

While we make every effort to ensure this Knowledge Base is accurate, itmay not always reflect the most recent updates or official guidelines.We appreciate your understanding and encourage you to reach out with anyfeedback or concerns.

Legacy Article

You are viewing an article from our legacy "FastTrack"publication program, made available for informational purposes. Articlesin this program were published without a requirement for independentediting or verification and are provided "as is" withoutguarantee.

Before using any information from this article, independently verify itssuitability for your situation and project.

Issue

  • How can I use Adapted Images in a web content article displaying in the Asset Publisher with custom Display Template? 

Environment

  • Liferay DXP 7.3

Resolution

  1. Go to System Settings > Template Engines > Freemarker Engine > Restricted Classes and remove serviceLocator from the restricted classes. 
  2. At the beginning of the Asset Publisher Template, add the following code: 
    <#assign dlAppServiceUtil = serviceLocator.findService("com.liferay.document.library.kernel.service.DLAppService")/>

  3. Use the following code when retrieving the image:

    <@adaptive_media_image["img"] fileVersion=dlAppServiceUtil.getFileEntry(image_json.getLong('fileEntryId')).getFileVersion()/>

After applying the custom template in the Asset Publisher, the source code contains adapted image like below:

<picture data-fileentryid="39919">

    <source media="(max-width:300px)" srcset="/o/adaptive-media/image/39919/Thumbnail-300x300/liferay-product-downloads.png?t=1635486233174">

    <source media="(max-width:1000px) and (min-width:300px)" srcset="/o/adaptive-media/image/39919/Preview-1000x0/liferay-product-downloads.png?t=1635486233174">

    <img src="http://localhost:8080/documents/37244/0/liferay-product-downloads.png/380248bb-8067-e93d-2468-1a5b22f16f48?version=1.0&amp;t=1635486233174">

</picture>

 

 

Did this article resolve your issue ?
Legacy Knowledge Base
Did this article resolve your issue ?