How to change upsell image size in Magento 2?

Question

I'm trying to change the size of the images of the upsell products shown on the product page, but can't figure out how to do it.'

Answer 1

To change the upsell image size, add the below code in your theme.

app/design/frontend/yourvendor/yourtheme/etc/view.xml

<?xml version="1.0"?>

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
   <media>
       <images module="Magento_Catalog">
           <image id="upsell_products_list" type="small_image">
                <width>152</width>
                <height>190</height>
            </image>
    </images>

Then set the width and height accordingly.

After update run the following commands :

php bin/magento s:s:d -f;
php bin/magento c:f

Answer 2

Editing the template file:

Access the template file responsible for displaying upsell products. This file is typically located at app/design/frontend/<Vendor>/<theme>/catalog/product/list/upsell.phtml.

Look for the line of code containing the img tag for the product image.

Within the img tag, locate the resize method used with the helper('catalog/image') function. This method resizes the image based on the specified dimensions.

Change the values passed to the resize method to your desired width and height. For example, if you want the image to be 200 pixels wide and 150 pixels tall, you would modify the code to:

<?php echo $this->helper('catalog/image')->init($_link, 'small_image')->resize(200, 150); ?>

Answer 3

Since image sizes can be configured from the theme configuration file, the best way to change size of the images of the Upsell products is changing current theme's view.xml file.

For example: app/design/frontend/{Vendor}/{theme}/etc/view.xml

Here {Vendor} and {theme} should be replaced by your theme's vendor name (First letter capital) and theme name (first letter small).

You can change size of upsell product images like:

<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
   <media>
       <images module="Magento_Catalog">
           <image id="upsell_products_list" type="small_image">
                <width>160</width>
                <height>200</height>
            </image>
        </images>
   </media>
</view>

Please review /vendor/magento/theme-frontend-luma/etc/view.xml for more reference.

After making changes, don't forget to run the following commands:

php bin/magento setup:static-content:deploy -f;
php bin/magento cache:flush