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

As a Portal Administrator I want to ensure that all my images have an optimized version for each of them according to the adaptive media configuration




      Portal administrators can define the Image Variants that will be generated when a new Image is uploaded to Documents and Media or to a Blog Entry. Every time a new image is uploaded to Documents and Media or to a Blog Entry, an Image process is triggered to ensure that it generates an Image Variant with a specific image width and height based on the Image Variants configuration.

      When a new configuration is added it won't contain any Image Variant at that time, because they are generated when the image is uploaded. Then, some Image Variants configuration might contain lot of generated images while other image variants configuration might only contain a few.

      In order to avoid this, the administrator should have the possibility to synchronize the image variants configuration by generating the image variants for all the configurations.

      Acceptance Criteria

      • Administrators should be able to generate all the image variants that are missing because a new configuration was added or because it wasn't generated by any error.
      • Administrators should be able to generate all the image variants that are missing for a specific Image Variant Configuration. Example: he might want to generate all the missing images for "Low Resolution" but do not regenerate the images for "High Resolution".
      • This process can be very heavy for the server, so we need to do run it as a background process so it doesn't collapse the server. The process is similar to "Reindexing the portal" so we need to be consistent with it.

      Use cases

      Main Scenario: A portal admin wants to ensure 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.

      Expected: From this time on when a user uploads an image it will be automatically optimized for each image resolution defined.

      Optimize all image resolutions

      1. Click on context icon of Adaptive Media (the three vertical dots icon at the top).
      2. Click on Optimize images.

      Expected: An optimization process for each image resolution is launched.
      Each image resolution percentage is continuously updated while its process is running.

      Optimize an image resolution

      1. Click on context icon of an image resolution (the three vertical dots icon at the right).
      2. Click on Optimize remaining.

      Expected: An optimization process is launched.
      Image resolution percentage is continuously updated while its process is running.


      • 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 column labeled "Optimized Images".
      2. Add a progress bar with a loading indicator as the content of Optimized Images column for each resolution created.
      3. Add the action "Optimize All Images" in the contextual actions of the section (top bar).
      4. Add the action "Optimize Remaining" in the contextual actions of each item.



      Progress bar

      • Once 100% is reached, it changes from turquoise to green.
      • A loading indicator is shown as long as the optimization process is running.
      • The percentage is updated each time the value changes.
      • The percentage is reseted when a user changes settings of an image resolution with optimized images.
      • Desirable: Animate the area of the progress bar when is updating its percentage.

      Warning alert

      • Appears when a user edits an image resolution that already has been optimized.
      • Message: "This resolution already has optimized-images. Once a new setting is saved, optimize again to apply the changes for all the images stored."

      Warning icon

      • Appears when an image resolution has images that were optimized with different values to the current settings.
      • Tooltip: "Update required: optimize remaining to apply current settings for all the images stored."

      Context actions for Adaptive Media

      • Two actions: "Optimize All Images" and "Reset Default Values".
      • When all the resolutions are optimized (100%) or while an optimization process is running, "Optimize All Images" item is disabled.

      Context actions for an image resolution

      • Three actions: "Edit", "Delete" and "Optimize Remaining".
      • When all the images of a resolution are optimized (100%) or while the optimization process is running, "Optimize Remaining" item is disabled.

      Interactive prototype


      Optimize All Images example

      Optimize Remaining example

      Edit an image resolution (created previously with a % of optimized images)


      Image Resolutions with Optimized Images Column

      Warning Alert

      Visual states for an Image Resolution item
      Zero State

      Normal State

      Updating State

      Complete State

      Warning State


        1. Complete State.png
          Complete State.png
          3 kB
        2. Editing an image resolution.gif
          Editing an image resolution.gif
          785 kB
        3. Image Resolutions with Optimized Images Column.png
          Image Resolutions with Optimized Images Column.png
          177 kB
        4. Normal State.png
          Normal State.png
          3 kB
        5. Optimize All.gif
          Optimize All.gif
          226 kB
        6. Optimize Remaining.gif
          Optimize Remaining.gif
          259 kB
        7. Updating State.png
          Updating State.png
          4 kB
        8. Warning Alert.png
          Warning Alert.png
          115 kB
        9. Warning State.png
          Warning State.png
          3 kB
        10. Zero State.png
          Zero State.png
          2 kB



            austin.chiang Austin Chiang
            sergio.gonzalez Sergio Gonzalez (Inactive)
            Recent user:
            Kiyoshi Lee
            Participants of an Issue:
            0 Vote for this issue
            0 Start watching this issue




                Version Package
                7.0.0 M6