Magento 2 – Get Product Image Using Helper and Block

blockshelpermagento2product-images

How can I put the below code into the module's files like helper/data.php or block/product.php, and how to use it to call Helper and Block into file.phtml .

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$_product = $objectManager->create("\Magento\Catalog\Model\Product")->load($_item->getId());                        
$helperImport = $objectManager->get('\Magento\Catalog\Helper\Image');
$imageUrl = $helperImport->init($_product, 'grid_hover_image')
                    ->setImageFile($_product->getHoverImage())
                    ->getUrl();

Thank you.

Best Answer

You may try the step below.

Assume you are using a custom extenstion name "MyCompany_Module"

step 1) Create a Block Productimage.php under app/code/MyCompany/Module/Blcok/Product/View

<?php

namespace MyCompany\Module\Block\Product\View;


use Magento\Catalog\Block\Product\Context;
use Magento\Catalog\Helper\Image;
use Magento\Catalog\Model\Product;

class Productimage extends \Magento\Framework\View\Element\Template
{

    /**
     * @var $productFactory \Magento\Catalog\Model\CategoryRepository 
     */
    protected  $productFactory;

    /**
     * @var \Magento\Catalog\Helper\Image
     */
    protected $_imageHelper;

    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,        
        \Magento\Catalog\Model\ProductFactory $productFactory,  
        \Magento\Catalog\Helper\Image $imageHelper,
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->productFactory = $productFactory;
        $this->_imageHelper = $imageHelper;
    }



    /**
     *
     * function to get product object
     * @param $productId int
     * @return object
     * 
     */
    public function getProductById($productId)
    {
         return $this->productFactory->create()->load($productId);

    }


    /**
     * Initialize Block to work with Image
     *
     * @param \Magento\Catalog\Model\Product $product
     * @param string $imageId
     * @param array $attributes
     * @return $this
     */
    public function init($product, $imageId, $attributes = [])
    { 


        return $this->_imageHelper->init($product,$imageId);
    }

}

step 2) in your layout.xml set the block class for your phtml file.

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
       ---------------------        
            <block class="MyCompany\Module\Block\Product\View\Productimage" name="product.image"  template="MyCompany_Module::catalog/product/view/myblock.phtml"/>
        ---------------------       

    </body>
</page>

step 3) call the init function in PHTML File:

<?php

    $product =  $block->getProductById(1);
    echo $block->init($product,'grid_hover_image')->getUrl();
?>

step 4) Run DI compine and cache flus command

sudp php bin/magento setup:di:compile
sudp php bin/magento cache:flush