Magento2: how can I resize the image used in gallery in the product page.

Question

In magento2 product page, the image gallery is rendered by fotorama.

The image size is exactly the same as the one upload to product.

Is it possible to resize all the image to the same size/ratio?

Thanks

Answer 1

Override gallery.phtml in your theme -> Magento_Catalog/templates/product/view/gallery.phtml

  <?php
        foreach ($block->getGalleryImages() as $image) { ?>

                <?php if ($block->isMainImage($image)): ?>

                    <img src="<?php echo $image->getData('large_image_url') ?>">
                <?php endif; ?>
                <?php if ((!$block->isMainImage($image))): ?>

                    <img src="<?php echo $image->getData('large_image_url') ?>">
                <?php endif; ?>

        <?php } ?>

Answer 2

In your theme > app/design/frontend/package/theme-name/etc/view.xml Inside <media> node you can define different image sizes:

<images module="Magento_Catalog">
    <image id="product_page_image_medium" type="image">
        <width>700</width>
        <height>560</height>
    </image>
</images>

Answer 3

Use this way to resize your image :-

$_imageHelper = $this->helper('Magento\Catalog\Helper\Image'); productImage = $_imageHelper->init($_product, $image)->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(400)->getUrl();

Answer 4

add this in your etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Catalog\Model\Product\Image" type="Sample\Code\Model\Product\Image" />
</config>

add this in Sample\Code\Model\Product\Image

 namespace Sample\Code\Model\Product;

    /**
     * Class Image
     * @package Sample\Code\Model\Product
     */
    class Image extends \Magento\Catalog\Model\Product\Image
    {
        protected function _construct () {
// set the quality of the image raging form 0 to 100
            $this->_quality = 100;
            parent::_construct();
        }
    }