Magento has standardized product image sizes for category and product pages, which takes a lot of the guesswork out of image processing. Sometimes, though, your client wants different images sizes for thumbnails, small image, and main images. Sometimes, they’re not square and the background is either an image or a different color than white.This can create issues, as Magento will insert white background panels to make the images square.
To get rid of those annoying panels on the product page thumbnails, you need to modify the app>template>catalog>product>view>media.phtml file. Look around line 73 for the code that generates the image.
Here is the section that generates the more views thumbnails: More Views code block (48)
As you can see, inserting a background color before resizing will make sure the panels that make the background appear square will now have the same background color as your theme: ie: ->backgroundcolor(’000′, ’000′, ’000′)->resize(56); ?>
In this example, the background color matches the theme background color- #000000.
Let’s look at the category images, now.
The client wants the images to be larger than the default image sizes, which are 165×165 by default. The client wants them to be 215 wide with the length to whatever it needs to be based on the image that was uploaded. The file we need to modify is app>template>catalog>product>list.phtml which generates the product grid on the catalog page. We are going to insert the same background color modification, and change the image size:Category List image size (32)
->backgroundcolor(’000′, ’000′, ’000′)->resize(215); ?>
We will also need to modify some of the css to accomodate the larger image sizes.
If you are having trouble identifying which template is building the images, turn on template path hints, in the admin>developer section.
Good luck.
