Magento 2 在产品列表中调用图片相册Gallery（产品图片）

在看到许多前端开发人员在产品列表页面搜索如何调用Gallery后，我们决定为如何完成此任务编写小课程（教程）。

好的，首先您需要在模块中创建类助手，例如 Ibnab/Common/Helper/Data.php 并添加代码：

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace Ibnab\Common\Helper;
use Magento\Catalog\Model\Product\Gallery\ReadHandler as GalleryReadHandler;
class Data extends \Magento\Framework\App\Helper\AbstractHelper {
  protected $galleryReadHandler;
    /**
     * Catalog Image Helper
     *
     * @var \Magento\Catalog\Helper\Image
     */
    protected $imageHelper;
    public function __construct(
    GalleryReadHandler $galleryReadHandler,  \Magento\Framework\App\Helper\Context $context,\Magento\Catalog\Helper\Image $imageHelper)
    {
        $this->imageHelper = $imageHelper;
        $this->galleryReadHandler = $galleryReadHandler;
        parent::__construct($context);
    }
   /** Add image gallery to $product */
    public function addGallery($product) {
        $this->galleryReadHandler->execute($product);
    }
    public function getGalleryImages(\Magento\Catalog\Api\Data\ProductInterface $product)
    {
        $images = $product->getMediaGalleryImages();
        if ($images instanceof \Magento\Framework\Data\Collection) {
            foreach ($images as $image) {
                /** @var $image \Magento\Catalog\Model\Product\Image */
                $image->setData(
                    'small_image_url',
                    $this->imageHelper->init($product, 'product_page_image_small')
                        ->setImageFile($image->getFile())
                        ->getUrl()
                );
                $image->setData(
                    'medium_image_url',
                    $this->imageHelper->init($product, 'product_page_image_medium')
                        ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
                        ->setImageFile($image->getFile())
                        ->getUrl()
                );
                $image->setData(
                    'large_image_url',
                    $this->imageHelper->init($product, 'product_page_image_large')
                        ->constrainOnly(true)->keepAspectRatio(true)->keepFrame(false)
                        ->setImageFile($image->getFile())
                        ->getUrl()
                );
            }
        }
        return $images;
    }
}

在这里，我们调用对象 Magento\Catalog\Model\Product\Gallery\ReadHandler 和 \Magento\Catalog\Helper\Image 从它的名称中你可以观察到第一个是通过属性的画廊的阅读器 – 这里它们读取 media_gallery – 并给你 此当前产品的所有图像的结果信息传递给方法 $this->galleryReadHandler->execute($product) 。
因此，我们示例中的 \Magento\Catalog\Helper\Image 是将我们的图库组织为三种类型 image_small / image_medium / image_large 。

好的，现在您需要转到主题内或任何地方的 list.phtml 并调用您的助手：

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

现在您可以使用 foreach 语句的当前产品（使用您的技术）：

 <a href="<?php echo $_product->getProductUrl() ?>">
                            <ul class="product-item-wrapper">
                                <?php
                                $_helperGallery->addGallery($_product);
                                $images = $_helperGallery->getGalleryImages($_product);
                                if ($images instanceof \Magento\Framework\Data\Collection) {
                                    $i = 1;
                                    foreach ($images as $image) {
                                        $item = $image->getData();
                                        if (isset($item['media_type']) && $item['media_type'] == 'image'):
                                            ?>
                                            <?php if ($i == 1): ?>
                                                <li class="selected">
                                                <?php else: ?>
                                                <li >
                                                <?php endif; ?>
                                                <img src="<?php echo isset($item['medium_image_url']) ? $item['medium_image_url'] : null; ?>" alt="Preview image">
                                            </li>
                                            <?php
                                            $i++;
                                        endif;
                                    }
                                }
                                ?>
                            </ul>
                        </a>

您可以使用以下命令在循环语句中转储当前图像：
var_dump( $image->getData());

现在一切都很酷，您可以使用图库中的任何类型的图像