0

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.

vendor_name_listing.xml

<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>
        </item>
    </argument>
</column>

Thumbnail.php

<?php
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(
                    'name/store/edit',
                    ['id' => $item['entity_id']]
                );
                }
            }
        }

        return $dataSource;
    }
}

enter image description here

0

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.