0
Magento 2.4.2-p1
Smartwave Porto theme

I really love how the new Magento 2.x takes on the website background color with transparent images. The problem we are having is that some of our images have the transparent PNG format while others actually have a white background so in 1 row will have transparent, white, white, transparent and so on... Magento 1.9.4 displayed the same transparent product photos with a white background. How can we force Magento 2.4.2-p1 to do the same?


UPDATED on September 8th:

I found these 2 articles:

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/themes/theme-images.html

https://community.magento.com/t5/Magento-1-x-Theming-Layout/How-to-remove-white-space-around-product-image-in-magento-2-Luma/td-p/83105

I then found the view.xml file in:

   /public_html/app/design/frontend/Smartwave/porto/etc
/public_html/app/design/frontend/Smartwave/porto_rtl/etc
/public_html/app/design/frontend/Smartwave/porto_child/etc

and added the false code into the following in all of the 3 locations mentioned above:

<image id="category_page_grid" type="small_image">
                <width>300</width>
                <height>300</height>
                
                <transparency>false</transparency>
                
            </image>
            <image id="category_page_grid-hover" type="thumbnail">
                <width>300</width>
                <height>300</height>
                                
                <transparency>false</transparency>
                
            </image>
            
            
            <image id="category_page_list" type="small_image">
                <width>300</width>
                <height>300</height>

                <transparency>false</transparency>

            </image>

But it doesn't work! Is this the right path and do I need to put that code somewhere else (or differently) in this file to make it work?


UPDATED on September 10th, 2021:

I contacted Smartwave Porto and they responded with:

"And please also understand that how the products show and works is the behaviour of the Magento default, not related to the Theme."

I checked and I have absolutely nothing in:

/public_html/app/design/frontend/Magento

What do I need to do to make this change? It feels like I almost got it but I'm missing something?


UPDATED September 11th, 2021:

The solution from Manish Bhojwani below will not work because every transparent image now shows up with the white background including all the logos (we can't have that) and even the little (loading) circle that pops up when you click on something and wait on the page to load.


UPDATED September 12th, 2021:

Manish Bhojwani might be onto something saying to:

"pass style directly to img tag, it will apply to all the images throughout the site. Add product image class reference before img tag. .class_name img {background-color: #ffffff;} "

Would anybody know what would the image class reference be for products on the front page and in category pages? Is it small_image? Would that be:

img tag. .small_image img {background-color: #ffffff;} ?

Can someone please post the exact code to use? Thank you.

1
  • Just checking if you had run php bin/magento catalog:images:resize command after you had passed parameters in view.xml to regerate the new images. That should have done the trick. Commented Sep 14, 2021 at 7:05

3 Answers 3

0
+50

@Allysin,

You can set the image background color using CSS and it will display background color if the image is transparent.

For Example:

img {
  background-color: #ffffff;
}

Good Luck.

5
  • That looks like a good suggestion! Where would you put that? I tried putting it in PORTO --> SETTINGS PANEL --> Custom Style 2, then cleaned and flushed Cache via SSH and re-indexed but it doesn't seem to be working.
    – Allysin
    Commented Sep 10, 2021 at 15:30
  • I've put it in Custom Style 2 and once the browser Cache was deleted, the products show up with the white background. This is NOT a GOOD SOLUTION though because every transparent image now shows up with the white background including all the logos (that's a NO-NO) and even the little circle that pops up when you click on something and wait on the page to load. Thank you for trying though Manish Bhojwani - it is much appreciated.
    – Allysin
    Commented Sep 11, 2021 at 14:56
  • If you pass style directly to img tag, it will apply to all the images throughout the site. Add product image class reference before img tag. .class_name img {background-color: #ffffff;} Commented Sep 12, 2021 at 12:53
  • Thank you for this suggestion - that looks like that might work. What would the image class reference be for products on the front page and in category pages? Is it small_image? Would that be img tag. .small_image img {background-color: #ffffff;} ? Would you please update your post with the code I could try? Thank you.
    – Allysin
    Commented Sep 12, 2021 at 13:42
  • Yours appears to be the only somewhat working solution and your suggestion to 'add product image class reference before img tag' appears to be logical. I really don't know what the image class reference for products on the front page/category pages would be? Would you have any suggestions I could try?
    – Allysin
    Commented Sep 15, 2021 at 18:39
0
  1. Go To Here :

PORTO --> SETTINGS PANEL --> Custom Style 2

  1. Put the following code into that box.

.fotorama__stage__frame img { background-color: #ffffff; }

  1. Now save the configuration and from CLI run all the commands like deploy, upgrade, caching and then check.
2
  • I've removed all changes done previously. Then put your code in Custom Style 2, then: php bin/magento cache:clean /// php bin/magento cache:flush /// php bin/magento indexer:reindex /// php bin/magento setup:static-content:deploy -f But it doesn't seem to work = the transparent images on the front page and in categories still load with the transparent background. Is there anything else I have to execute via SSH to make this work? Thank you.
    – Allysin
    Commented Sep 15, 2021 at 18:34
  • Using above command does it work on the product page? Commented Sep 16, 2021 at 4:05
0

Look at this and play around

https://github.com/magento/magento2/blob/2.4-develop/app/code/Magento/Catalog/Test/Unit/Model/_files/valid_view.xml#L20-L28

<transparency>true</transparency>
<background>[255, 25, 2]</background>

should work fine.

2
  • Which file is that? I've put those 2 lines in all the different code pieces in view.xml and uploaded the same view.xml into the 3 paths mentioned in my original post, then deleted Cache, reindexed and deployed static content but it does not appear to be working. Here are the paths where I've put this: /public_html/app/design/frontend/Smartwave/porto/etc //// /public_html/app/design/frontend/Smartwave/porto_rtl/etc //// /public_html/app/design/frontend/Smartwave/porto_child/etc /////
    – Allysin
    Commented Sep 15, 2021 at 19:16
  • Which ever theme is applied to frontend, use it That particular theme. Also meanwhile point me which theme demo is similar to yours preview.themeforest.net/item/… try and see what may help
    – rex
    Commented Sep 17, 2021 at 0:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.