Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
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

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

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.