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

As a Portal Admin I want to easily define the number of adaptive images that will be generated as well as the width and height




      Adaptive Media Images require some initial setup to define the images that will be created and the maximum width and height of those images. This configuration is defined in the Control Panel -> System Settings.

      The current UI is not friendly at all because in order to configure an image variant, the user needs to follow the following pattern:

      An example of the syntax before could be:

      Acceptance Criteria

      • The image variants configuration should be defined at a *Portal* level. This means that 2 different Portal Instances can have different image variants configuration, but 2 sites within the same portal instance cannot.
      • The Image Variants Configuration should only be accessible by Portal Administrators.
      • The administrators can add as many Image Variants Configuration as desired without any limitation in terms of numbers.
      • The configuration of each of the Image Variants need to be simple enough (name, max.width and max.height)
      • Validation of the information is required. An example of the validation is that the image width needs to be a number.
      • The information that is required for now as part of the image variants configuration is:
      1. Human name of the image image configuration (examples: High Definition, Low Resolution...)
      2. Max Height: the maximum value that the image height will have after being processed. If the image height is larger than this value it might be scaled to fit into this.
      3. Max Width: the maximum value that the image width will have after being processed. If the image height is larger than this value it might be scaled to fit into this.

      The UUID won't be filled by the administrators and it will be the same as the configuration name

      Use cases

      Main Scenario: A portal admin wants to define different quality thresholds for images

      1. The user interacts with Adaptive Media in Control Panel > Configuration
      2. Fills the data for each resolution he wants to define


      • Adaptive Media App is installed previously.

      Additional Scenarios

      1. A portal admin wants to know which images are adaptive or not.

      User Experience


      1. Add a new item within Control Panel > Configuration, labeled "Adaptive Media"
      2. Create a page to admin different resolutions
      3. Create a page to input / edit data for an image resolution



      Image Resolution Tab Content

      • It's shown when a portal admin interacts with "Adaptive Media" Item within "Control Panel > Configuration" because it's the first tab loaded.
      • The list of image resolution items work following Lexicon's list pattern alphabetically ordered by the name.
      • Each item of the list has two allowed actions: Edit and Delete.
      • If a user edits an item, it navigates to the corresponding Image Resolution Detail page to edit the data.
      • If a user deletes an item, a browser warning popup appears following the existing pattern in the platform when an item is deleted. When the user confirm to delete the item, a success alert is shown to give feedback.

      Info Alert

      • It's shown at the top of Image Resolution Tab Content when the current image resolutions are default values.
      • It's hidden when the user changes one of the default values.

      Image Resolution Detail

      • It's shown when a user interacts with the plus button or a user edits an Image Resolution already created.
      • When the Image Resolution is new. The page label is New Image Resolution.
      • When the Image Resolution is already created and the user wants to edit the data. The page label is the name of the Image Resolution that is been edited.
      • When the new image resolution is saved we navigate to the "Adaptive Media Page" updated with the new item and a success alert is shown.

      Context actions for Adaptive Media

      • One action: "Reset Default Values".
      • Reset Default Values action: delete all the current image resolutions and restore default values.

      Context actions for an image resolution

      • Two actions: "Edit" and "Delete".

      Interactive prototype

      URL: http://idumvd.axshare.com


      Info Alert

      Image Resolution Tab Content


      Image Resolution Detail Page - Desktop

      Image Resolution Detail Page - Mobile


      This story deals with UI, so we didn't write any backend test.

      Below you can find some scenarios that we should test and some of them should be automated:

      • Ensure that the Adaptive Media application can be accessed when a new portal instance is created.
      • Ensure that the configuration of Adaptive Media images can be different in different portal instances and they are not overriden/shared unless they are the default values.
      • Add some default values following the format specified in https://issues.liferay.com/browse/LPS-69896 and ensure that those values are used by default when adding new portal instances
      • Ensure that when modifying a configuration that had some default values, the default values can be restored by clicking "Restore Default Values"
      • Only portal administrators can access and manage the adaptive media configuration in the different portal instances.
      • The information message alerting the admin of the default values only appears when the values are the default.
      • Max. Height and Max. Width needs to be larger than 0.
      • There cannot be 2 configurations with the same Name in the same portal instance.
      • When adding/deleting/updating the configuration in a portal Instance through the Adaptive Media app, the default values defined in configuration of Control Panel -> Configuration -> System Settings don't change at all.


        1. Actions.png
          89 kB
        2. Image Resolution Detail.png
          Image Resolution Detail.png
          89 kB
        3. Image Resolution Detail mobile.png
          Image Resolution Detail mobile.png
          47 kB
        4. Image Resolution Tab.png
          Image Resolution Tab.png
          71 kB
        5. Info Alert.png
          Info Alert.png
          109 kB

          Issue Links



              patricia.perez Patricia Perez
              sergio.gonzalez Sergio Gonzalez (Inactive)
              Recent user:
              Kiyoshi Lee
              Participants of an Issue:
              0 Vote for this issue
              1 Start watching this issue




                  Version Package
                  7.0.0 M6