Affects Version/s: None
Component/s: Out of the box Fragments > Image
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.
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|