/   /   /  Magento 2 Call media gallery (product images) in product list

Note:

For more extensions and themes visit our store

Magento 2 Call media gallery (product images) in product list

After see many frontend developers search for how call gallery in product list page , we decide to write small course (tutorial) for how done this task .

Ok first you need create class helper inside your module , for example Ibnab/Common/Helper/Data.php and push the code :

  1.  
  2. <?php
  3. /**
  4.  * Copyright © 2015 Magento. All rights reserved.
  5.  * See COPYING.txt for license details.
  6.  */
  7. namespace Ibnab\Common\Helper;
  8. use Magento\Catalog\Model\Product\Gallery\ReadHandler as GalleryReadHandler;
  9. class Data extends \Magento\Framework\App\Helper\AbstractHelper {
  10.   protected $galleryReadHandler;
  11.     /**
  12.      * Catalog Image Helper
  13.      *
  14.      * @var \Magento\Catalog\Helper\Image
  15.      */
  16.     protected $imageHelper;
  17.     public function __construct(
  18.     GalleryReadHandler $galleryReadHandler,  \Magento\Framework\App\Helper\Context $context,\Magento\Catalog\Helper\Image $imageHelper)
  19.     {
  20.         $this->imageHelper = $imageHelper;
  21.         $this->galleryReadHandler = $galleryReadHandler;
  22.         parent::__construct($context);
  23.     }
  24.    /** Add image gallery to $product */
  25.     public function addGallery($product) {
  26.         $this->galleryReadHandler->execute($product);
  27.     }
  28.     public function getGalleryImages(\Magento\Catalog\Api\Data\ProductInterface $product)
  29.     {
  30.         $images = $product->getMediaGalleryImages();
  31.         if ($images instanceof \Magento\Framework\Data\Collection) {
  32.             foreach ($images as $image) {
  33.                 /** @var $image \Magento\Catalog\Model\Product\Image */
  34.                 $image->setData(
  35.                     'small_image_url',
  36.                     $this->imageHelper->init($product, 'product_page_image_small')
  37.                         ->setImageFile($image->getFile())
  38.                         ->getUrl()
  39.                 );
  40.                 $image->setData(
  41.                     'medium_image_url',
  42.                     $this->imageHelper->init($product, 'product_page_image_medium')
  43.                         ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
  44.                         ->setImageFile($image->getFile())
  45.                         ->getUrl()
  46.                 );
  47.                 $image->setData(
  48.                     'large_image_url',
  49.                     $this->imageHelper->init($product, 'product_page_image_large')
  50.                         ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
  51.                         ->setImageFile($image->getFile())
  52.                         ->getUrl()
  53.                 );
  54.             }
  55.         }
  56.         return $images;
  57.     }
  58. }
  59.  
  60.  

here we call to objects  Magento\Catalog\Model\Product\Gallery\ReadHandler and \Magento\Catalog\Helper\Image from name you can observe the first is the reader of gallery by attribute here read media_gallery and give you as result information all images of this current product passed in method $this->galleryReadHandler->execute($product)   .
So and \Magento\Catalog\Helper\Image in our example is for more organized our gallery to three type  image_small  image_medium   image_large .

Ok now you need go to your list.phtml inside you theme or anywhere and call helper :

$_helperGallery = $this->helper('Ibnab\Common\Helper\Data');

now you can use with current called product inside for each (with you technique):

  1.  
  2.                    <a href="<?php echo $_product->getProductUrl() ?>">
  3.                             <ul class="product-item-wrapper">
  4.                                 <?php
  5.                                 $_helperGallery->addGallery($_product);
  6.                                 $images = $_helperGallery->getGalleryImages($_product);
  7.                                 if ($images instanceof \Magento\Framework\Data\Collection) {
  8.                                     $i = 1;
  9.                                     foreach ($images as $image) {
  10.                                         $item = $image->getData();
  11.                                         if (isset($item['media_type']) && $item['media_type'] == 'image'):
  12.                                             ?>
  13.                                             <?php if ($i == 1): ?>
  14.                                                 <li class="selected">
  15.                                                 <?php else: ?>
  16.                                                 <li >
  17.                                                 <?php endif; ?>
  18.                                                 <img src="<?php echo isset($item['medium_image_url']) ? $item['medium_image_url'] : null; ?>" alt="Preview image">
  19.                                             </li>
  20.                                             <?php
  21.                                             $i++;
  22.                                         endif;
  23.                                     }
  24.                                 }
  25.                                 ?>
  26.                             </ul>
  27.                         </a>
  28.  
  29.  

you dump current image inside loop statement with :
var_dump( $image->getData());

now all is cool you can use any type of image from gallery

Comments

IBNAB is a company made of a group of professionals whose work is providing secure open source solutions. Our company strives for reaching magnificent results with each experience and provides professional open source solutions that cover every part of the business process.

Newsletter