As a Page Creator I would like to get automatic selection of image resolution based on viewport

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: 7.3.6 CE GA7, 7.3.X, 7.4.13 DXP GA1, Master
• Component/s: Out of the box Fragments > Image
• Labels:
  • d_20_05
  • fc_20_09
  • fc_20_10
  • fc_20_11
• Branch Version/s:
  7.3.x
• Backported to Branch:
  Committed
• Epic Link: Support "Adaptive media" in content pages for images
• Git Pull Request: https://github.com/liferay-echo/liferay-portal/pull/2501

Intro/Context:

Liferay Adaptive Media allows to create image resolutions automatically when a user is uploading a picture in documents. But today our content pages are not using this capability.

The goal of this story is to get the list of image resolution from Adaptive Media and choose the best image resolution available the one that will optimize the size of the picture while keeping a good resolution for a given viewport.

-

When a page creator is adding the image fragment and selects an image from Documents and Medias 

Then the page creator can see which image resolution has been selected automatically in particular:

• the image name (incl resolution)
• the image size (in kb or mb what appropriate)

-

When a page creator selecting another viewport (to see the responsiveness of the screen)

Then the image fragment selects the most appropriate picture 

• i.e. the image resolution that is available with size > viewport screen size
• for example: using srcset tags Responsive_images.

Image selection rule (rule applies to width since no restriction for viewport height):

Both images and viewports has min-width and max-width properties. Browser chooses the most appropriate image corresponding to the current viewport(window) size. Our viewport definitions have the following sizes:

Mobile portrait(MP): 240 - 575px

Mobile landscape(ML): 576 - 767px

Tablet: 768 - 991px

Desktop: 992px - no max

 

By default Liferay provides 2 adaptive media configurations:

Thumbnail:  0 - 300px

Preview: 300 - 1000px

 

As mentioned before, browser uses the most appropriate(the narrowest) adaptive media configuration, so in the default settings. if there is no appropriate AM configuration, default image(as-is) is used.

AM sizes have higher priority when the viewport size, so having the AM configuration 600-800px, it is going to be used for part of ML(starting from 600px width) and for part of Tablet (till 800px) viewport.

 

Design

Figma Mockup

Test Scenarios

Context
When select an image in Image fragment, the best image resolution will be selected automatically.
Assume the width of Desktop viewport is v
Assume the width of original image as i
Assume the width of available image resolution are a and b. Additionally, a < b

Test Scenarios	Test Strategy	Kind of test	Is it covered by FrontEnd ? (JS-Unit)	Is it covered by BackEnd ? (unit or integration)	Could it be covered by POSHI?
i > v > a	Critical	Manual	No	No	Yes
i > b > a > v	Critical	Manual	No	No	Yes
v > i > a	Critical	Manual	No	No	Yes
v > a > i	Critical	Manual	No	No	Yes
a > i > v	Critical	Manual	No	No	Yes
a > v > i	Critical	Manual	No	No	Yes