Magento – How to change product image size in Magento 2

magento2product-images

In the gird view of a category I want to reduce the number of products per ROW from 4 to 3, and I want to increase the image size there … how can I do that?

Best Answer

For increasing the image size, we can change the default values in view.xml of our custom theme.

app/design/frontend/{Vendor_Theme}/{Theme_Name}/etc/view.xml

<image id="category_page_grid" type="small_image">
    <width>240</width>
    <height>300</height>
</image>
<image id="category_page_list" type="small_image">
    <width>240</width>
    <height>300</height>
</image>

We can read more here.

From my experience, in Magento 1, we can easily set items per row in products/category pages by adding <action method="setColumnCount"><count>5</count></action>. Currently, Magento 2 doesn't support the set and get column count. However, we can do this by using CSS. For example, we can find the css in file: vendor/magento/theme-frontend-luma/Magento_Catalog/web/css/source/module/_listings.less.

If we want to be more advance, we can add the set and get column count method by overriding the class \Magento\Catalog\Block\Product\ListProduct.

Related Topic