Dynamic Media - PNG image with transparent background - Served with white | Community
Skip to main content
P
pradeepmoolemane
Level 3
June 1, 2022
Solved

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

  • June 1, 2022
  • 4 replies
  • 4762 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by arunpatidar

I am getting the image but with the white background 


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  

 

4 replies

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
June 1, 2022

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
    P
    pradeepmoolemaneAuthor
    Level 3
    June 1, 2022

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

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      June 1, 2022

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

      Arun Patidar
        B
        Adobe Employee
        BimmiSoAdobe Employee
        Adobe Employee
        June 1, 2022

        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

          Fanindra_Surat
          Community Advisor
          Fanindra_SuratCommunity Advisor
          Community Advisor
          June 1, 2022

          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!

            P
            pradeepmoolemaneAuthor
            Level 3
            June 17, 2022

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

              Terms & ConditionsAccessibility statement

              Loading footer...