How To Set the Thumbnail Size in Magento

You would expect the ability to resize thumbnails to be accessible on the admin area, but no. Again, a quick drill in the source code is required.

At the beginning I was a bit annoyed, but then I realized – this is actually a good thing! The main idea is that Magento grants you with a free hand to customize your thumbnail size for each view and situation. For instance: you want the thumb size to be different when you view your products on your front page, or in a category page – grid view. Then when on the list view – you would have much bigger thumbnails, and why not? more room for larget thumbnails on this view.

So in fact, when you assign a product photo in the back end, Magento downloads and crop only the actual image. The whole resizing deal occurs every time you load the page. So for each page you can set a different size, not only for the images’ html, but for the actual thumb.

The obvious downfall is off-course the fact, that for each page load, the server has to work on the thumbnail anew. On the other hand, think of a situation where you change the thumbnail and then have to go through all your products thumbnails and upload them again.

So here’s how it’s done:

To resize images on your homepage, Open app/design/frontend/your_package/your_theme/template/catalog/product/new.phtml. If the file is not yet there, copy it from app/design/frontend/base/default/template/catalog/product/

Find the line: <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(145) ?>" width="145" height="145" alt="<?php echo $this->htmlEscape($_product->getName()) ?>" /></a>

Change it to the new size.

To resize images on the category page, do the same with the file: app/design/frontend/your_package/your_theme/template/catalog/product/list.phtml. Notice that here, you can handle differently the images in the grid view and the images in the list view.

Don’t forget to disable cache in order to view the results.