cancel
Showing results for 
Search instead for 
Did you mean: 

How limit pictures on product page

How limit pictures on product page

Hi everyone. I wonder if anyone has done some customization of product page or has idea how to make Magento 2.1 display only certain pictures of my product. I have configurable items and each has

base_image

small_image

thumbnail_image

Which all show the same product, but they vary in picture size/resolution. The issue I'm facing is, that Magento shows both, that is base and small picture on the panel of the product, while I would like to show only base images, because it is pointless to display both pictures with same content. Any idea, much welcome.

1 REPLY

Re: How limit pictures on product page

Ufff, this is a tough one. So far I've managed to limit images of my configurable item, while I still can't figure out how to limit images of each simple product related to it.

 

Ok, I've found out that images of configurable prodcut that are shown on product page inside this fotorama block are generated inside file

/vendor/magento/module-catalog/Block/Product/View/Gallery.php with function getGalleryImagesJson. This is how default function looks like

    public function getGalleryImagesJson()
    {
        $imagesItems = [];
        foreach ($this->getGalleryImages() as $image) {
            $imagesItems[] = [
                'thumb' => $image->getData('small_image_url'),
                'img' => $image->getData('medium_image_url'),
                'full' => $image->getData('large_image_url'),
                'caption' => $image->getLabel(),
                'position' => $image->getPosition(),
                'isMain' => $this->isMainImage($image),
            ];
        }
        if (empty($imagesItems)) {
            $imagesItems[] = [
                'thumb' => $this->_imageHelper->getDefaultPlaceholderUrl('thumbnail'),
                'img' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
                'full' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
                'caption' => '',
                'position' => '0',
                'isMain' => true,
            ];
        }
        return json_encode($imagesItems);
    }

And here is my customized version of it

    //>custom_file_entry
    public function getGalleryImagesJson_cfe()
    {
        $imagesItems = [];
        foreach ($this->getGalleryImages() as $image) {
		if ($this->isMainImage($image)) {
           		$imagesItems[] = [
             	  	 'thumb' => $image->getData('small_image_url'),
               		 'img' => $image->getData('medium_image_url'),
            	   	 'full' => $image->getData('large_image_url'),
               		 'caption' => $image->getLabel(),
               		 'position' => $image->getPosition(),
               		 'isMain' => $this->isMainImage($image),
            		];
	 	}
        }
        if (empty($imagesItems)) {
            $imagesItems[] = [
                'thumb' => $this->_imageHelper->getDefaultPlaceholderUrl('thumbnail'),
                'img' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
                'full' => $this->_imageHelper->getDefaultPlaceholderUrl('image'),
                'caption' => '',
                'position' => '0',
                'isMain' => true,
            ];
        }

	/*$str = print_r($imagesItems,true);
	$dt = date('Y-m-d H:i:s');
	$fname = '/tmp/debfile_' . $dt . '.txt';
	$debfile = fopen($fname,'w');
	fwrite($debfile,$str);
	fclose($debfile);*/

        return json_encode($imagesItems);
    }
    //>custom_file_entry

As you see, the crucial condition I've added is "isMainImage". The last part of the function is for debug purpose only, to get the string representation of generated array. Besides this, I've changed the conde inside file

/vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml so that is calls my customized function, the relevant part is this:

<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": <?php /* @escapeNotVerified */ echo $block->getMagnifier(); ?>,
                "data": <?php /* @escapeNotVerified */ 
		//>custom_file_entry
		//echo $block->getGalleryImagesJson();
		echo $block->getGalleryImagesJson_cfe();
		//>custom_file_entry
		 ?>,
                "options": {
                    "nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/nav"); ?>",
                    <?php if (($block->getVar("gallery/loop"))): ?>
                        "loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/loop"); ?>,
                    <?php endif; ?>........................................

So yes, this makes fotorama show only base image of configurable product, but I'm still wondering how to limit those images of each simple product. I can't figure out, where are they pulled from...Has anyone done something similar? I would really appreciate some help on this. Much thanks for any input.