0

Magento2 product detail page the image resize isn't working.

 ASPECTED RATIO NOT WORKED (100*100) resize function

I want to resize the image with a fixed width but it fails.

4

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 node inside the 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 node.

The id attribute value of the 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.

Magento Luma Magento/blank ..... 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 This will regenerate the new image sizes.

Magento 2 frontend architecture Creating Custom Theme

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.