In my custom admin module I have the uploader image column grid, so when I have an image everything is fine, but when I haven't there are empty borders that is displayed and area is also cliquable.

Does someone know how to remove these empty borders and also the click image popup when there is no image. I don't want to do it bad with some js.


<column name="storefinder_image" sortOrder="21" class="Vendor\name\Ui\Component\Listing\Column\Thumbnail">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/thumbnail</item>
            <item name="sortable" xsi:type="boolean">false</item>
            <item name="has_preview" xsi:type="string">1</item>
            <item name="label" xsi:type="string" translate="true">Image</item>


namespace Vendor\Name\Ui\Component\Listing\Column;

use Magento\Catalog\Helper\Image;
use Magento\Framework\UrlInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Ui\Component\Listing\Columns\Column;

class Thumbnail extends Column
     * @var \Magento\Store\Model\StoreManagerInterface
    protected $storeManager;

     * @param ContextInterface $context
     * @param UiComponentFactory $uiComponentFactory
     * @param Image $imageHelper
     * @param UrlInterface $urlBuilder
     * @param StoreManagerInterface $storeManager
     * @param array $components
     * @param array $data
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        Image $imageHelper,
        UrlInterface $urlBuilder,
        StoreManagerInterface $storeManager,
        array $components = [],
        array $data = []
    ) {
        $this->storeManager = $storeManager;
        $this->imageHelper = $imageHelper;
        $this->urlBuilder = $urlBuilder;
        parent::__construct($context, $uiComponentFactory, $components, $data);

     * 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) {
                $url = '';
                if($item[$fieldName] != '') {
                    $url = $this->storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . $item[$fieldName];
                    $item[$fieldName . '_src'] = $url;
                    $item[$fieldName . '_orig_src'] = $url;
                    $item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
                    ['id' => $item['entity_id']]

        return $dataSource;

enter image description here


you can try to edit your css file

.data-grid .data-grid-thumbnail-cell img { border: none !important; }

  • Thanks, but i dont want do that, this will be removed for all images uploaded and not uploaded and also doesn't disable the click – PЯINCƏ Mar 28 '18 at 9:11

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.