Magento uses the file called view.xml
which is maintained at the theme level of the application.
So for example, if you are using the default theme luma
you should find the view.xml
under vendor/magento/theme-frontend-luma/etc/view.xml
In this file, you would see <images/>
node inside the <media>
node.
<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="bundled_product_customization_page" type="thumbnail">
<width>140</width>
<height>140</height>
</image>
<image id="cart_cross_sell_products" type="thumbnail">
<width>200</width>
<height>248</height>
</image>
<image id="cart_page_product_thumbnail" type="small_image">
<width>165</width>
<height>165</height>
</image>
........
</images>
</media>
......
</view>
The dimension of the images is maintained here under the <image/>
node.
The id
attribute value of the <image/>
node is referenced in the codebase.
For example:
<image id="related_products_list" type="small_image">
<width>152</width>
<height>190</height>
</image>
The id value is used in the view file vendor/magento/module-catalog/view/frontend/templates/product/list/items.phtml
case 'related':
/** @var \Magento\Catalog\Block\Product\ProductList\Related $block */
if ($exist = $block->getItems()->getSize()) {
$type = 'related';
$class = $type;
$image = 'related_products_list';
$title = __('Related Products');
$items = $block->getItems();
$limit = 0;
$shuffle = 0;
$canItemsAddToCart = $block->canItemsAddToCart();
$showWishlist = true;
$showCompare = true;
$showCart = false;
$templateType = null;
$description = false;
}
break;
Here the $image
refers to the value of the image size here:
<?php echo $block->getImage($_item, $image)->toHtml(); ?>
In case the theme does not have a view.xml
, then it might be using a fallback theme (parent theme) which has the view.xml
file.
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Magento Luma</title>
<parent>Magento/blank</parent>
.....
</theme>
Here Magento/blank
is the parent theme.
In case of changing/overwriting the values of the view.xml
file you need to completely copy the entire view.xml
file to your custom theme and change the values.
view.xml
does not have a node value fallback system, means if a value of a node is not present in you custom theme's view.xml
it will not fallback to its parent theme's view.xml value, that's why entire file needs to be copied.
Once the values changes have been done, you will have to run
php bin/magento catalog:images:resize
Update: As of Magento 2.4 this command supports synchronous (default) and asynchronous modes. Asynchronous means that images will not be processed immediately on command execution. Using the Magento queue functionality, these images will be scheduled for resizing and then processed in the background. To enable asynchronous mode, use the -a or --async option.
php bin/magento catalog:images:resize -a
To speed up the job while in asynchronous mode, you may manually run several instances of a consumer with the command in each instance:
php bin/magento queue:consumer:start media.storage.catalog.image.resize