Dynamic Media images re-sizing with blank spaces

[sergio_r]

Hi:

We are a new team using AEM and right now we're working on making Dynamic Media accommodate to our needs. One of the main issues we have found is that Dynamic Media does NOT crop images, but it re-sizes to cover as much of the rendition as possible, BUT always showing the whole image. This approach leaves big blank spaces which is a terrible user experience when browsing (see image below).

What Dynamic Media does

Has anyone encountered this issue? How have you solved it? We have thought of two options:

   (1) crop the image so it covers the whole rendition (see below). For this one, we have no idea if it's possible or how to do it as we have not found anything online about it.

   (2) allow content producers to overwrite the rendition with a manually created one. For this one, we think it will bring a lot of effort to content producers auditing all the renditions, cropping them, uploading them and re-publishing them. Also, we haven't been able to overwrite a dynamic rendition. The best we can do is create a static duplicate and code the components to check if there's a static rendition with the same name before checking dynamic renditions.

Is there a third option and we're not seeing it?

I really appreciate any help you can provide.

Thanks!

Sergio.

What we need it to do

   (1)- Crop keeping either the width or the height but filling the entire rendition.

   (2)- Overwrite the dynamic rendition with a new one.

[smacdonald2008]

I asked our Eng team to look at this question.

[sergio_r]

Hi smacdonald2008​, do you know if the Eng Team has been able to check on this question??

Thanks!

Sergio

[kautuk_sahni · Accepted solution]

Reply from Engineering team:

The viewers doesn't support a crop/zoom mode where the asset is auto-zoomed to fill the entire viewer space. Also an image preset would not work since it only handles a specific case, not varying image sizes and aspects.

Few questions that Engineering would like to ask here:-

Q1. Is this about embedding DM images into the page using plain HTML? Or using viewers? Or using responsive image library? (how is the customer embedding the image?)

Viewers do not have an out of the box solution, however it is likely possible to achieve this behavior by building a custom viewer or by augmenting existing viewer embed code.

~kautuk

[sergio_r]

Hi Katnu:

Just as a reference for you and for anyone else that might find the same issue, we already solved our problem by using the fit property on the Image Modifier window.

* If fit=vfit, then the image will fit to the top and the bottom of the rendition's size.

* If fit=hfit, then the image will fit to the right and the left of the rendition's size.

Hope this helps.

[satyambansal]

Hi Sergio, Kautak,

Were you able to crop the images within dynamic media component or interactive media component ? If yes please tell me the approach to use for the same.

Thanks in Advance!!

[sergio_r]

Hi satyambansal:

Our issue was related to white spaces always showing around the image. The solution we found was setting the fit property in the rendition, which allows you to define if you want this rendition to force the image to fit vertically (so the sides might be chopped off) or horizontally (so the top/bottom might be chopped). This is an out-of-the-box functionality that can be handled by content producers and does not need code/development.

This solved the majority of our problem since usually the image that we use has the same or similar proportions in the renditions that it will load. BUT the issue might arise again when you try to use “tall” images in renditions with vfit, or “wide” images in renditions with hfit.

See an example of how we use it in our page: https://www.royalcaribbean.com/cruise-activities/blue-planet

• The rendition used for the enlarged image in desktop is: 949x730 (proportion: 1.3) and set to fit=vfit
• The rendition used for the small thumbnail in desktop is: 175x98 (proportion: 1.7) and set to fit=vfit

If you check, the first first image (the lady in the purple dress) looks fine because the original size is 5000x3773 so the proportions (1.32) are very similar.

BUT if you check the second image (the 2 acrobats hanging), it still has white spaces on the side because  the original image is 3233x5000 (proportion: 0.6) so the proportions are way too off, and when dynamic media makes the rendition fit vertically, then the sides are left empty. This is a known issue we have come to accept. :-(

Hope this helps! :-)

Note:

• To set up the fit property, go to Tools-> Assets->Image Presets-> Select your rendition-> Select Edit->Select Advanced->Update the “Image Modifier” field.

[narsie26860678]

Hi all,

I am trying to use dynamic media component, but when I drag the component to the page that component is not appearing on the page but I am able to to see in CRX. I am using AEM 6.3 version.

[abhigyans406402]

You can try dragging and dropping an image into the parsys area and then you would be able to edit the component.
Hope this solved the problem.