Differences Between Adaptive Media Settings and Browser Dev Tools

This reference article is for customers who design and troubleshoot their web pages using Liferay DXP's Adaptive Media functionality. Frequently, content creators inspect their web pages using tools built into their browser for various reasons. They want to see that all their web elements are functioning as intended or to ensure their pages are in compliance with industry standards (for example, Section 508 and WCAG). It should not be a surprise when some image srcset may look different after using the native Adaptive Media widget.

Here is the basic setup:

  1. Create a web content article that has a long and narrow image. (I used an image that was 708px by 1650px.)
  2. Navigate to the Control Panel → Configuration → Adaptive Media.
  3. Create a new Image Resolution rule. We want all long images over 1000px high to be resized to 1000px. Click the (+) sign to create a new rule.
  4. Enter the following:
    • Name: MaxHeight_1000px
    • Max Width (px): {leave blank}
    • Max Height (px): 1000
  5. Click Save.
  6. Click the 3 dot icon → Adapt Remaining.

Once the status bar reaches 100%, the embedded image inside the Web Content article's preview will be resized 1000px.
adaptive-media-params01.png

Next, go to a site and view this article.

  1. Click the Go to Site link in the Control Panel. You can use any site.
  2. Add a page to the site.
  3. Click the Add button.
  4. Add an Asset Publisher portlet to the page. The web content created earlier displays.
  5. Click the article link to expand the image.
  6. Right click over the image then click the Inspect Element (Q) command. This opens the Inspector function.

It was noted that when the mouse is hovering over an image to expose the source media, even though the srcset shows 1000px, the image's original dimensions may appear. Likewise, when using a toggle to change different simulated views based on which device (mobile or desktop), the thumbnail preview will change size.

adaptive-media-params02.png

Resolution

This is intended behavior. The issue is not in the Adaptive Media portlet but the browser. The developer tools made available in Firefox and Chrome have their own settings which do not affect the settings in DXP. If you look at the screenshot below, you will see that the preview size is set to 1000px. This is the same as what was configured earlier.

adaptive-media-params03.png

Designing and troubleshooting web pages can be a tedious process. Web designers can be assured that Liferay's Adaptive Media portlet is there to generate a uniform set of thumbnails based on prescribed width and height.

Was this article helpful?
0 out of 0 found this helpful