Expand my Community achievements bar.

SOLVED

Dynamic Media - PNG image with transparent background - Served with white

Avatar

Level 4

Hello Team,

We are using dynamic media in our project. and we are exploring DM. I am facing one issue that is we have uploaded image with transparent background on AEM DAM. But when it served from DM, getting white background. 

 

I tried adding manually fmt=png-alpha to remove white background. But not sure how to get this dynamically append as query param for all png images. OR is there a better way to handle white background ?. Also not sure whether its an issue in the DM product where it converts transparent background image to white background image?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Probably then you need to add this param along with bfc and fmt

fmt=png-alpha&bfc=on

You can update the existing component or use sling rewriter to get the images and update the url while generating url

e.g. https://github.com/arunpatidar02/aem63app-repo/blob/master/java/CustomLinkChecker.java  

 



Arun Patidar

View solution in original post

8 Replies

Avatar

Community Advisor

Hi,

Is this in Safari or Chrome browser?

 

I have seen this issue with monochromatic image only in Safari.DM returns 403 instead of actual image.



Arun Patidar

Avatar

Level 4

Hi @arunpatidar this is happening all browsers, tested on chrome, safari, firefox.

Avatar

Community Advisor

What response do you get from DM? Error or white image?



Arun Patidar

Avatar

Level 4

I am getting the image but with the white background 

Avatar

Correct answer by
Community Advisor

Probably then you need to add this param along with bfc and fmt

fmt=png-alpha&bfc=on

You can update the existing component or use sling rewriter to get the images and update the url while generating url

e.g. https://github.com/arunpatidar02/aem63app-repo/blob/master/java/CustomLinkChecker.java  

 



Arun Patidar

Avatar

Employee Advisor

Hi @pradeepmoolemane ,

 

Please go through below URL

https://blogs.perficient.com/2019/03/07/aem-6-4-challenges-with-dynamic-media-scene7-integration/

 

You can add format.

 

Hope this helps!!

Thanks

Avatar

Community Advisor

Hi @pradeepmoolemane - Good Job, you have rightly identified the solution to rendering the transparent images by using fmt=png-alpha. Now, there are multiple solutions to apply this formatting for all the pngs but the simplest could be to have a utility that detects the DAM image extension and renders a corresponding DM URL with the fmt option suffixed and use it in all the components leveraging DM images.

Let me know, if you have any other questions!

Avatar

Level 4

Resolved by extending image preset selection option to teaser component and preset setup configured with png-alpha.