Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Avatar

Level 3

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  

 

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.

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  

 

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 3

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