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

    Details

      Description

      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

        Attachments

          Issue Links

            Activity

              People

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

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package
                  7.3.6 CE GA7
                  7.3.X
                  7.4.13 DXP GA1
                  Master