Replace thumbnail with small image in Admin Catalog Products

Question

I'd like to display "small image" in place of "thumbnail image" for each product in magento administration Catalog > Products.

I tried editing file /vendor/magento/module-catalog/Ui/Component/Listing/Columns/Thumbnail.php like this:

public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');
            foreach ($dataSource['data']['items'] as & $item) {
                $product = new \Magento\Framework\DataObject($item);
                $imageHelper = $this->imageHelper->init($product, 'small_image');
                $item[$fieldName . '_src'] = $imageHelper->getUrl();
                $item[$fieldName . '_alt'] = $this->getAlt($item) ?: $imageHelper->getLabel();
                $item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
                    'catalog/product/edit',
                    ['id' => $product->getEntityId(), 'store' => $this->context->getRequestParam('store')]
                );
                $origImageHelper = $this->imageHelper->init($product, 'small_image');
                $item[$fieldName . '_orig_src'] = $origImageHelper->getUrl();
            }
        }

        return $dataSource;
    }

but it didn't work. Any ideas?

Answer 1

Just you need to change the image type from thumbnail to small_image in view.xml Image ID: product_listing_thumbnail and product_listing_thumbnail_preview

For Example:

<media>
    <images module="Magento_Catalog">
        <image id="product_listing_thumbnail" type="small_image">
            <width>75</width>
            <height>75</height>
        </image>
        <image id="product_listing_thumbnail_preview" type="small_image"/>
        <image id="product_thumbnail_image" type="small_image">
            <width>75</width>
            <height>75</height>
        </image>
    </images>
</media>

You can add the above code inside your Vendor/Module/etc/view.xml or in the admin theme.

Answer 2

Follow the below steps to get the exact output.

Step 1: Prepare your custom image type

Vendor\Module\etc\view.xml

<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="product_listing_small_image" type="small_image">
                <width>75</width>
                <height>75</height>
            </image>
            <image id="product_listing_small_image_preview" type="small_image"/>
        </images>
    </media>
</view>

Step 2: Update your Thumbnail column into the Small Image column

Vendor\Module\View\adminhtml\ui_component\product_listing.xml

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">

    <columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">
        <column name="thumbnail"
                class="Vendor\Uipage\Ui\Component\Listing\Columns\SmallImage"
                component="Magento_Ui/js/grid/columns/thumbnail"
                sortOrder="20">
            <settings>
                <altField>name</altField>
                <hasPreview>1</hasPreview>
                <addField>true</addField>
                <label translate="true">Small Image</label>
                <sortable>false</sortable>
            </settings>
        </column>
    </columns>
</listing>

Step 3: Update the thumbnail Class

Vendor\Module\Ui\Component\Listing\Columns\SmallImage

<?php

namespace Vendor\Uipage\Ui\Component\Listing\Columns;

use Magento\Catalog\Api\ProductRepositoryInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;

/**
 * Class SmallImage
 *
 * @api
 * @since 100.0.2
 */
class SmallImage extends \Magento\Ui\Component\Listing\Columns\Column
{
    const NAME = 'thumbnail';

    const ALT_FIELD = 'name';

    private $imageHelper;
    private $urlBuilder;
    private $productRepository;

    /**
     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param \Magento\Catalog\Helper\Image $imageHelper
     * @param \Magento\Framework\UrlInterface $urlBuilder
     * @param array $components
     * @param array $data
     */
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        \Magento\Catalog\Helper\Image $imageHelper,
        \Magento\Framework\UrlInterface $urlBuilder,
        ProductRepositoryInterface $productRepository,
        array $components = [],
        array $data = []
    ) {
        parent::__construct($context, $uiComponentFactory, $components, $data);
        $this->imageHelper = $imageHelper;
        $this->urlBuilder = $urlBuilder;
        $this->productRepository = $productRepository;
    }

    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');
            foreach ($dataSource['data']['items'] as & $item) {
                //$product = new \Magento\Framework\DataObject($item);
                $product = $this->productRepository->getById($item['entity_id']);
                $imageHelper = $this->imageHelper->init($product, 'product_listing_small_image');
                $item[$fieldName . '_src'] = $imageHelper->getUrl();
                $item[$fieldName . '_alt'] = $this->getAlt($item) ?: $imageHelper->getLabel();
                $item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
                    'catalog/product/edit',
                    ['id' => $product->getEntityId(), 'store' => $this->context->getRequestParam('store')]
                );
                $origImageHelper = $this->imageHelper->init($product, 'product_listing_small_image_preview');
                $item[$fieldName . '_orig_src'] = $origImageHelper->getUrl();
            }
        }

        return $dataSource;
    }

    /**
     * Get Alt
     *
     * @param array $row
     *
     * @return null|string
     */
    protected function getAlt($row)
    {
        $altField = $this->getData('config/altField') ?: self::ALT_FIELD;
        return $row[$altField] ?? null;
    }
}

Step 4:

Remove the generated folders

Flush the cache, you will get the expected output.

Hope it will help you!