Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-113806

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




      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.



      Figma Mockup

      Test Scenarios

      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


          Issue Links



              david.gutierrez David Gutiérrez Mesa
              tarik.demnati Tarik Demnati (Inactive)
              Engineering Assignee:
              Pavel Savinov (Inactive)
              Recent user:
              Sophia Zhang
              Participants of an Issue:
              0 Vote for this issue
              0 Start watching this issue




                  Version Package
                  7.3.6 CE GA7
                  7.4.13 DXP GA1