As a Page Creator I would like to use liferay "Adaptive media" in content pages so that the image size and density is chosen or defined automatically

• Type: Epic
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Pages > Page Editor
• Labels:
  • 7.4-ce-ga1
  • d_20_05
  • fc_20_09
  • fc_20_10
  • fc_20_11
  • fc_20_12
  • fc_21_01
  • fc_21_02
  • fc_21_03
• Epic/Theme:
  • Page_Authoring
• Epic Status: To Do

Intro/Context:

To have best user experience and best ranking from search engines a Marketer needs to ensure the pages he/she builds are loading really fast.

Adaptive media currently allows to define image resolutions to fit automatically a given device screen size (viewport). Hence if a user is visualizing a web page from a Mobile or a Desktop the image size and resolution will be adapted automatically.

Today Adaptive Media is mostly invisible for content creators. Once an image is added to a content, the app works behind the scenes to deliver an adapted image appropriate to the device in use.  However the user should be able to know what will be the chosen resolution so that he can act (ex: create new image resolution)

Current known limitation with adaptive media.

Currently adaptive media is not applied to images added as a fragment. There is a need to enable this by using appropriate CSS tag. The image selection is based on a screen size and doesn't adapt to the image fragment size. A fragment with size (width: 100px, height: 100px) may get a picture resolution of size (width: 1000px) because the selection is based uniquely on the current device size while other resolution exist.

Automatic selection: To get the adaptive media feature work automatically when changing viewport the right taglib needs to be added (see link) to the image selection. This is how it is currently supported for web content and blogs and we'd need to verify it is also supported for Content Pages and make it work.

Manual selection: To be able to specify manually the resolution for a given fragment, we need to find the Adaptive Images for a Specific Image Resolution (or resize the image if selected resolution doesn't fit)

  
The goal of this story is to get additional support for adaptive media so that the right image resolution is selected or created for each fragment (both in automatic and manual modes).

Possible functions:

• LPS-113806 - Allow automatic selection of image resolution based on viewport and show resolution info (width and height: auto).
  • The selection is done by the browser using srcset tag definition.
  • Example of info to display to the user: image-300px-300px.jpg, size: 4kb
• LPS-113808 - Allow automatic selection of image based on fragment image resizing (width or height: fixed). 
  • resize image width and length
  • select the right image resolution based on resized image dimension.
• LPS-114283 - Allow manual selection of images in case automatic selection is not optimal.
  • In this case we are not resizing the image but the image is not optimized.
  • NOTE: Part of the configuration we should have the option AUTO

 

 

OPTIONAL if feasible:

• Allow saving new image resolution image based on resized image fragment (and crop). NO MOCK UP. This would solve one FR linked below.

 

[DRAFT] Adaptive media use cases table:
https://docs.google.com/spreadsheets/d/1IQgYKwjXGZ8_nGsssnSz4o4A6ZDIHR5Vpb6dVAj1Nb4/edit#gid=0