Skip to Content
This question has been flagged
1 Reply
430 Views
Avatar
Yasin Belber

Hi everyone,

I’m facing an issue with transparent background images (in both WebP and PNG formats) on my Odoo 18 website. When I upload images, the thumbnails (e.g., on category pages) automatically add a white background. However, when I view the product page directly, the transparent background is displayed correctly.

Previously, on Odoo 17, I could avoid this issue by uploading images with a maximum resolution of 500x500 pixels in WebP format or any resolution in PNG format, but this workaround no longer works after upgrading to Odoo 18.

I cloned my production branch to staging in order to see if I can resolve the issue by having a look at source code and modifying it, but no success so far.

I found the following code snippet under src/odoo/addons/web_editor/controllers/main.py file:
 
# Background standardization

        if bg is not None and bg.startswith('rgba'):

            bg = bg.replace('rgba', 'rgb')

            bg = ','.join(bg.split(',')[:-1])+')'

Commented out the last two lines, but that doesnt seem to help. This is all very new to me and I don't know Python. 

I would like for my uploaded images to keep their transparent background through the whole site because I'm building a dark mode website and having white background on images does not work for me.

Does anyone know how to fix this issue? Any help with modifying the code or applying a better solution would be greatly appreciated!

Thanks in advance!

Avatar
Discard
Econ Odoo

I just tested on Odoo's runbot and you're right, when you uploaded a transparent png and the converted webp will have a white background.

However, I think with previous comment, I found a temporary workaround. You can go to the website and edit the product page, replace the image with a transparent image and the resulting image will still be transparent. That's why I can do those screen captures as proof.

Avatar
Econ Odoo
Best Answer

I just tested with a transparent png on the website and set it to use the original png format, the transparent is preserved. Right click on the image, I can save it back same as original png. Actually, even when i set the format as webp, it still show the transparent. So maybe there's something wrong with your instance.

In this example, I used the first transparent png I got from google
Upload it to the website, naturally the background looks white.
I change the background of the box around it to be black, it shows black,orange, it shows orange. So there's no unexpected behavior from odoo.



Edit: My bad, didn't notice that you mentioned only product thumbnail.

Edit 2: I tested the product page and product list and the transparency correctly maintained. So may be the issue lies in your darkmode css where it is not totally dark in some new areas. (I didn't know that this single reply costs me all the karma for image and link posting:)




Avatar
Discard
Yasin Belber
Author

Hey,

Thanks for taking the time to reply. Sadly the issue does not lie in CSS. I just double checked by right clicking on two separate thumbnail images and downloading them - one that's been uploaded as 500x500 px webp image and another uploaded as higher res image. In my image editing software I can see that the originally higher res image has a white background added to it and the 500px one does not.

I assume its an image processing module running in the background of Odoo that scales down higher res images for thumbnail use but then adds a white background to it. Which I need to find a way to turn off.

For thumbnail resized images are 512x512 px and from the looks of it if my product images are less than that, then I circumvent the image processor completely.