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>