Submit Feedback
Legacy Knowledge Base
Published Jul. 2, 2025

Adaptive Media not applied on Content Pages

Written By

Rita Schaff

How To articles are not official guidelines or officially supported documentation. They are community-contributed content and may not always reflect the latest updates to Liferay DXP. We welcome your feedback to improve How To articles!

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

Legacy Article

You are viewing an article from our legacy "FastTrack" publication program, made available for informational purposes. Articles in this program were published without a requirement for independent editing or verification and are provided"as is" without guarantee.

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

Issue

  • I noticed that Adaptive Media is not applied in fragments with an image.
  1. Add an image to the Documents and Media Library with a width above 600px
  2. Go to Control Panel→Configuration→Adaptive Media
  3. Add a new resolution with the properties width: 600px, height: automatic
  4. Adapt the new resolution to the existing images
  5. Go to Site→Content & Data→Web Content and add a new Basic Web Content
  6. Add the image uploaded in step 1 to the content and publish it
  7. Add a Web Content Display Portlet to a page and configure the added Web Content
  8. Open Device Simulation in the Browser and simulate a mobile device (in my case I used Chrome and simulated an iPhone X)
  9. Inspect the image in the Web Content Display Portlet with the Browser dev tools (best in network tab)

Result: The image is served from "/o/adaptive-media/...", in my case:
/o/adaptive-media/image/49546/preview-600x0/Policy.png?t=1585211947689
→the lower resolution image is used

  1. Add a Content Page and configure a fragment with an image (e.g. image or card)
  2. Configure the same image as in the Web Content
  3. Publish the Content Page
  4. Open Device Simulation in the Browser and simulate a mobile device (again, Chrome and simulated an iPhone X)
  5. Inspect the image in the fragment with the Browser dev tools (best in network tab)

Result: The image is served from "/documents/...", in my case
/documents/20124/0/Policy.png/8e3dbd7a-feb4-d5cd-e34a-2ee6c6ad124a?version=1.0&t=1585211947689&download=true
→the original image is used

Environment

  • DXP 7.2
  • DXP 7.3

Resolution

  • This is a missing feature that has been included in DXP 7.4 GA1+
  • See feature request for this: LPS-97919
Did this article resolve your issue ?
Legacy Knowledge Base
Did this article resolve your issue ?