Magento: How to Change Product Image Fotorama Size

Introduction:
When working with Magento, customizing the display of product images can significantly enhance the visual appeal and functionality of your product pages. In this guide, we’ll walk through the process of changing the product image Fotorama size via the view.xml file, cleaning the cache, running the catalog:images:resize command, and modifying the \Magento\Catalog\Block\Product\View\GalleryOptions class to adjust the image dimensions accordingly.

Step 1: Modify the Product Image Fotorama Size via view.xml
First, locate your theme’s view.xml file, which is usually found at app/design/frontend/[Vendor]/[Theme]/etc/view.xml. If the file doesn’t exist, you will need to create it. Here, you can add or change the image dimensions to suit your needs. For example:

<images>
    <image id="product_page_image_medium" type="image">
        <width>500width>
        <height>500height>
    image>
images>

Adjust the width and height values to your desired dimensions for the product page images.

Step 2: Clean the Magento Cache
After updating the view.xml file, clear Magento’s cache to ensure your changes are applied. Execute the following command in your command line:

bin/magento cache:clean

Step 3: Regenerate Product Images
Next, you need to regenerate the product images to reflect the new dimensions specified. Run this command to resize the images:

bin/magento catalog:images:resize

Step 4: Update the GalleryOptions Class
To further customize how images are handled, you might want to override the GalleryOptions class in Magento. Here’s how you can do it:

• Create or use an existing custom module.
• Define the new GalleryOptions class in your module’s di.xml file:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Catalog\Block\Product\View\GalleryOptions" type="[Vendor]\[Module]\Block\Product\View\GalleryOptions" />
config>

• Implement your custom logic in the GalleryOptions.php file:

namespace [Vendor]\[Module]\Block\Product\View;

use Magento\Catalog\Block\Product\View\GalleryOptions as BaseGalleryOptions;

class GalleryOptions extends BaseGalleryOptions
{
    public function getOptions()
    {
        $optionItems = parent::getOptions();
        $optionItems['maxheight'] = (int) $this->escapeHtml(
            $this->gallery->getImageAttribute('product_page_image_medium', 'height') ?:
            $this->gallery->getImageAttribute('product_page_image_medium', 'width')
        );
        $optionItems['maxwidth'] = (int) $this->escapeHtml(
            $this->gallery->getImageAttribute('product_page_image_medium', 'height') ?:
            $this->gallery->getImageAttribute('product_page_image_medium', 'width')
        );

        return $optionItems;
    }
}

Step 5: Clear Cache and Test
Finally, after implementing these changes, clear the cache again to ensure everything works as expected:

bin/magento cache:clean

Conclusion:
With these steps, you can now control how your product images appear on your Magento site, enhancing both functionality and aesthetic appeal. Ensure you have backups and proper version control in place to avoid any disruptions. Happy coding!

Additional Tips:

• Always test changes on a development environment before applying them to your live site.
• Regularly update your documentation to reflect any changes made during the development process.