8

How to get the placeholder image URL on my template file of product listing page?

9
    use  \Magento\Store\Model\StoreManager $storeManager

    $this->storeManager = $storeManager;
    $path =
    catalog/placeholder/thumbnail_placeholder OR
    catalog/placeholder/swatch_image_placeholder OR
    catalog/placeholder/small_image_placeholder OR
    catalog/placeholder/image_placeholder OR

     public function getConfig($config_path)
        {
            return $this->storeManager->getStore()->getConfig($config_path);
        }

<img src = $mediaUrl.'catalog/product/placeholder'.$this->getConfig($path) />
    $mediaUrl = $this ->storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA );

On Magento 2.2:

  • Get Helper in Block (phtml)
    $imageHelper = $this->helper(\Magento\Catalog\Helper\Image::class);

  • Get Helper Global
    $imageHelper = \Magento\Framework\App\ObjectManager::getInstance()->get(\Magento\Catalog\Helper\Image::class);

  • Get Placeholder Image Url. User as parameter: 'image', 'smal_image', 'swatch_image' or 'thumbnail'.
    $placeholderImageUrl = $imageHelper->getDefaultPlaceholderUrl('image');

  • Hi saurabh there is a / missing after "placeholder" while getting image source . Also $mediaUrl should be above the img tag, please correct. – aton1004 Jan 30 '17 at 8:04
  • yes thanks aton , I known but there are some formating issue that why I did that. – Saurabh Taletiya Jan 30 '17 at 12:22
  • I want to pass the placeholder image path in my API, but when I use getDefaultPlaceholderUrl() it generates image path like: example.com/static/version1551260928/webapi_rest/_view/en_US/… – Gaurav Agrawal Feb 27 at 10:36
6

If you check your store settings you will find option of Product Image place holders

Stores > Configuration > Catalog > Catalog > Product Image Placeholders

You can call the get the value in block and call in your template file.

<?php 

protected $_scopeConfig;

public function __construct
(
    ---
    \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    ---

){
    ---
    $this->_scopeConfig = $scopeConfig;
    ---
}

public function getPlaceholderImage(){
    return $this->_scopeConfig->getValue('catalog/placeholder/image_placeholder'); // Base Image
    $this->_scopeConfig->getValue('catalog/placeholder/small_image_placeholder'); // Small Image
    $this->_scopeConfig->getValue('catalog/placeholder/swatch_image_placeholder'); // Swatch Image
    $this->_scopeConfig->getValue('catalog/placeholder/thumbnail_placeholder'); // Thumbnail Image
}

In Your Template File Call

$block->getPlaceholderImage();
3

To get the placeholder image url on the product listing page template, do this:

$imageUrl = $block->getImage($block->getProduct(), 'category_page_grid')->getImageUrl();
3

We should take a look at the Magento Helper class \Magento\Catalog\Helper\Image

For example :

<?php

namespace Vendor\Module\Helper;

use Magento\Catalog\Helper\ImageFactory as HelperFactory;
use Magento\Framework\View\Asset\Repository;

class Image
{
    /**
     * @var HelperFactory
     */
    protected $helperFactory;

    /**
     * @var Repository
     */
    protected $assetRepos;

    /**
     * Image constructor.
     * @param HelperFactory $helperFactory
     * @param Repository $repository
     */
    public function __construct(
        HelperFactory $helperFactory,
        Repository $repository
    ) {
        $this->assetRepos = $repository;
        $this->helperFactory = $helperFactory;
    }

    /**
     * Get image url
     *
     * @param $product
     * @param $imageId
     * @return mixed
     */
    public function getImageUrl($product, $imageId = null)
    {
        /** @var \Magento\Catalog\Helper\Image $helper */
        if ($imageId == null) {
            $imageId = 'cart_page_product_thumbnail';
        }
        $helper = $this->helperFactory->create()
            ->init($product, $imageId);
        return $helper->getUrl();
    }

    /**
     * Get small place holder image
     *
     * @return string
     */
    public function getPlaceHolderImage()
    {
        /** @var \Magento\Catalog\Helper\Image $helper */
        $helper = $this->helperFactory->create();
        return $this->assetRepos->getUrl($helper->getPlaceholder('small_image'));
    }
}
2

In block, use following method:

public function getPlaceholderImage() {
    return sprintf('<img src="%s"/>', $this->getViewFileUrl('Magento_Catalog::images/product/placeholder/thumbnail.jpg'));
}
0

If you're trying to get it in any template file. You'll need Magento's image helper. \Magento\Catalog\Helper\Image::class

You can get an instance like this at the top of any .phtml file

$imageHelper = \Magento\Framework\App\ObjectManager::getInstance()->get(\Magento\Catalog\Helper\Image::class);

and get the path to the placeholder image url like this

$imageHelper->getDefaultPlaceholderUrl('small_image')
$imageHelper->getDefaultPlaceholderUrl('image')

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.