Magento product grid image size

Question

I've changed the product grid on my catalog/category page from 4 to 3 columns. Because of this change the product container in my product grid is being resized with CSS, though my image sizes stay the same. This results my images being scaled up, becoming stretched and pixelated.

Therefore I'm trying to retrieve a larger image size in my category pages by altering the my code in my 'template/catalog/product/list.phtml':

From:

<?php echo $this->helper('catalog/image')->init($_product, 'small_image'); ?>

To:

<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>

This results in all my product images being replaced with the standard Magento logo image placeholder. I've also tried to use 'thumbnail' instead of 'image', which does work but returns the same sized images as 'small_image'.

I'm building on Magento 1.9 and using the 'rwd' theme/template.

Siarhey Uchukhlebau Siarhey Uchukhlebau · Accepted Answer · 2016-03-18T14:03:29

Add event observer:

<events>
        <catalog_product_collection_load_before>
            <observers>
                <add_iamge_to_collection>
                    <type>singleton</type>
                    <class>test/observer</class>
                    <method>addImageToProductCollection</method>
                </add_iamge_to_collection>
            </observers>
        </catalog_product_collection_load_before>
    </events>

Add image attribute to the select:

public function addImageToProductCollection($observer)
{
    /** @var Mage_Catalog_Model_Resource_Product_Collection $collection */
    $collection = $observer->getCollection();

    if ($collection instanceof Mage_Catalog_Model_Resource_Product_Collection) {
        $collection->addAttributeToSelect('image');
    }
}

Change small_image to image at list.phtml

$this->helper('catalog/image')->init($_product, 'image')->resize($yourSize);

Magento product grid image size

2 Answers