How to change product list grid and image size?

Question

How to change product list grid image size and how to change grid from 4 to 3? Because the images are so small now.

I want to have larger images and change grid from 4 to 3.

I am using Magento 1.9.1.

Answer 1

To change grid 4 to 3
Copy file app/design/frontend/rwd/default/layout/catalog.xml into your theme
and change below code

<action method="setColumnCount"><count>4</count></action>

to

<action method="setColumnCount"><count>3</count></action>

in layout handles catalog_category_layered and catalog_category_default

To increase image size in grid view
Copy file app/design/frontend/rwd/default/template/catalog/product/list.phtml into your theme
and inside grid mode code, change below code
<?php $_imgSize = 210; ?>
to

<?php $_imgSize = 250; // your required image size ?>

Answer 2

There is a lot of information about this if you search in google (also in stackexchange too). For example please see these:
http://www.templatemonster.com/help/magento-how-to-change-products-images-dimensions.html
http://www.templatemonster.com/help/magento-how-to-set-number-of-columns-in-category-listing.html

Answer 3

I have an alternate approach to address this issue.

If you are using a template that load jQuery, you can use the following code and place it in: System > Configuration > General > Design > HTML Head > Miscellaneous Scripts

<script>
jQuery("document").ready(function() {
    jQuery(".product-image img").attr({ width: "100%", height: "auto" });
});
</script>

Your image tags shall have width and height attributes assigned as defined in the code. Ideally, this code should not mess-up with responsiveness as i have successfully used this code on my site.

This jQuery approach is used just to avoid changing php template files as any subsequent upgrades to magento can break some parts in future unless you keep full track of changes to these template files. That's why i prefer jQuery technique.

Do let me know your thoughts if someone find the jQuery approach not appropriate.