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

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>

 

 

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0