Home | Blog | Design | Change your Magento image backgrounds without hacking core files

If you’ve ever worked with Magento you know that it’s not always the most intuitive system to use. It’s very powerful, but it’s not simple. One of the problems I’ve encountered a number of times is when you have a catalog of images and the Magento resize function puts a white border on all images it re-sizes. Yes, there’s a complicated way of doing a proportional resize in Magento, but that’ll be an article for another day. Here I’m just going to tell you quickly how to change that background color:

1. FTP into to your Magento file area then navigate to ‘app/design/front/end/yourtheme/template/catalog/product/view/media.phtml‘.

2. search for all occurrences of ‘->resize‘. Just prior to each of these occurrences paste the following: ‘->keepTransparency(true)->backgroundColor(array(0,0,0))‘ (and replace the ‘(0,0,0)‘ with whichever RGB color combination you desire.

3. Go back a level in your file structure and open ‘list.phtml‘, then repeat Step 2 in this file.

Note that some themes have 2 different themeing directories. For instance, I was just recently working with a theme from Magesolutions called Athlete. The path to the media file I needed to change was within the default directory, not the mgstheme/athlete directory.

There are other parameters that can be added here, such as:

• ->constrainOnly(false)
• ->keepAspectRatio(true)
• ->keepFrame(true)

I will elaborate on these at a later date.

I hope this little tip has helped. Let me know if you have any other suggestions of how to accomplish the same thing without hacking core Magento files, or if you have any issues making this work.