অ্যাডমিন গ্রিডে ম্যাজেন্টো 2 এ একটি চিত্র প্রদর্শন করুন

Question

আমি আমার মডিউলগুলির একটিতে অ্যাডমিন গ্রিডে একটি চিত্র প্রদর্শন করতে চাই।
আমি নতুন গ্রিড সিস্টেমটি ব্যবহার করছি, এটি ইউআই উপাদানগুলির সাথে একটি।
পণ্যগুলির জন্য গ্রিডে কীভাবে থাম্বনেইল যুক্ত করা হয়েছে তা আমি একবার দেখেছিলাম, তবে এটি আমার মাথার উপরে।
আমার সত্তা EAV নয়, একটি সাধারণ ফ্ল্যাট টেবিল সত্তা।
আমি আমার UI উপাদান এক্সএমএল ফাইলে এটি যুক্ত করার চেষ্টা করেছি

<column name="image">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/image</item>
            <item name="sortable" xsi:type="boolean">false</item>
            <item name="altField" xsi:type="string">name</item>
            <item name="has_preview" xsi:type="string">1</item>
            <item name="label" xsi:type="string" translate="true">Image</item>
        </item>
    </argument>
</column>

তবে এটি আমার গ্রিডে কোনও প্রভাব ফেলতে পারে না। কোনও চিত্র নেই (আমার ডিবি ক্ষেত্রটিকে চিত্র বলা হয়) কলাম, কোনও ত্রুটি নেই, কিছুই নেই।
কেউ ইউআই উপাদান ব্যবহার করে গ্রিডে কোনও চিত্র যুক্ত করার মাধ্যমে আমাকে হাঁটাতে পারে?

Answer 1

আপনার ui উপাদান এক্সএমএল এ যুক্ত করা উচিত:

<column name="image" class="Your\Modulename\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="altField" xsi:type="string">title</item>
            <item name="has_preview" xsi:type="string">1</item>
            <item name="label" xsi:type="string" translate="true">Thumbnail</item>
        </item>
    </argument>
</column>

.. এবং তারপরে আপনার \ মডিউলনাম \ ইউআই \ উপাদান \ তালিকা \ কলাম \ থাম্বনেইল.এফপি এর অনুরূপ কিছু:

<?php
namespace Your\Modulename\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
{
    const ALT_FIELD = 'title';

    /**
     * @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
                    ).'pathtoyourimage/'.$item[$fieldName];
                }
                $item[$fieldName . '_src'] = $url;
                $item[$fieldName . '_alt'] = $this->getAlt($item) ?: '';
                $item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
                    'your_module/yourentity/edit',
                    ['yourentity_id' => $item['yourentity_id']]
                );
                $item[$fieldName . '_orig_src'] = $url;
            }
        }

        return $dataSource;
    }

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

আমি আশা করি এটি সাহায্য করবে!

Comments

এটি আমাকে সাহায্য করেছে! যদিও আমাকে কয়েক লাইন পরিবর্তন করতে হয়েছিল। আমি পরিবর্তন if($item[$fieldName] != '')করতে if($item['url'] != '')এবং 'pathtoyourimage/'.$item[$fieldName]করতে 'pathtoyourimage/'.$item['url']। আমি $fieldName'ইমেজ' ফিরছিলাম তবে আমার ডিবি ক্ষেত্রটিকে 'url' বলা হয়েছিল। বাকী বাকী জায়গাগুলি বাকি $item[$fieldName . '***']ছিল।

— শন নর্থ্রপ

ধন্যবাদ, @ ম্যাজডেভএনএল। আমি যখন থাম্বনেইল চিত্রটিতে ক্লিক করি তখন আমি একাধিক চিত্র প্রদর্শন করতে চাই।

— যোগেশ আগরওয়াল

তার কাজ নিখুঁত। চিত্র দেখানো হয়েছে! তবে এখন আমি চিত্র সহ কিছু পাঠ্য সংযোজন করতে চাই। আমি চেষ্টা করি কিন্তু ব্যবহারযোগ্য নয়। আপনি আমাকে বলতে পারেন কীভাবে চিত্রের সাথে পাঠ্য সংযোজন করা যায়। আমি কেবল পণ্যের চিত্রটি এবং নতুন লাইনের পণ্য স্কু এবং নাম দেখাতে চাই

— হাফিজ উমার

পারফেক্ট! এটা ভাল কাজ! আমরা কীভাবে চিত্র সহ কিছু পাঠ্য সংযুক্ত করতে পারি। আমি পণ্য চিত্র দেখিয়েছি এবং এখন একই কলাম সহ চিত্রের নতুন লাইনে স্কু এবং নাম যুক্ত করতে চাই। আপনি আমাকে বলতে পারেন কিভাবে চিত্র সহ কিছু পাঠ্য সংযোজন করবেন?

— হাফিজ উমার

Answer 2

আপনার গ্রিড.এফপিতে নীচের মত সংজ্ঞা দিন

$this->addColumn(
    'image',
    array(
        'header' => __('Image'),
        'index' => 'image',
        'renderer'  => '\Vendorname\Modulename\Block\Adminhtml\Modulename\Grid\Renderer\Image',
    )
);

Image.phpঅধীনে তৈরি করুন

\ Vendorname \ moduleName \ ব্লক \ Adminhtml \ moduleName \ গ্রিড \ পেশকারী \

এবং কোড নীচে পেস্ট করুন

namespace Vendorname\Modulename\Block\Adminhtml\Modulename\Grid\Renderer;

class Image extends \Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer
{
    protected $_storeManager;


    public function __construct(
        \Magento\Backend\Block\Context $context,
        \Magento\Store\Model\StoreManagerInterface $storeManager,      
        array $data = []
    ) {
        parent::__construct($context, $data);
        $this->_storeManager = $storeManager;        
    }


    public function render(\Magento\Framework\DataObject $row)
    {
        $img;
        $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
           \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
       );
        if($this->_getValue($row)!=''):
            $imageUrl = $mediaDirectory.$this->_getValue($row);
            $img='<img src="'.$imageUrl.'" width="100" height="100"/>';
        else:
            $img='<img src="'.$mediaDirectory.'Modulename/no-img.jpg'.'" width="100" height="100"/>';
        endif;
        return $img;
    }
}

Comments

আমি মনে করি আপনি প্রশ্নটি সঠিক বুঝতে পারেন নি। আমার গ্রিডটি ইউআই-উপাদান ব্যবহার করে নির্মিত হচ্ছে। এটি ইউআই-উপাদানগুলির সাথে কাজ করে না।

— মারিয়াস

এই উত্তরটি আমাকে ইউআই - উপাদানগুলি ব্যবহার না করে আমার কাজে সহায়তা করেছে

— মুজাহিদ

Answer 3

আপনার ui_componentলেআউট ফাইলটিতে এই ট্যাগটি যুক্ত করুন

<column name="logo" class="NAMESPACE\MODULENAME\Ui\Component\Listing\Columns\Logo">
    <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="add_field" xsi:type="boolean">true</item>-->
            <item name="sortable" xsi:type="boolean">false</item>
            <item name="altField" xsi:type="string">name</item>
            <item name="has_preview" xsi:type="string">1</item>
            <item name="label" xsi:type="string" translate="true">Brand Logo</item>
        </item>
    </argument>
</column>

এবং এই নতুন ফাইলটি তৈরি করুন যা আমরা আমাদের ui_componentকলামে নির্ধারিত করেছি

<?php
namespace NAMESPACE\MODULENAME\Ui\Component\Listing\Columns;

use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;

class Logo extends \Magento\Ui\Component\Listing\Columns\Column
{
    const NAME = 'logo';

    const ALT_FIELD = 'name';

    protected $_storeManager;

    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,        
        \Magento\Framework\UrlInterface $urlBuilder,
        array $components = [],
        array $data = [],
        \Magento\Store\Model\StoreManagerInterface $storeManager
    ) {        
        parent::__construct($context, $uiComponentFactory, $components, $data);
        $this->_storeManager = $storeManager;
        $this->urlBuilder = $urlBuilder;
    }

    /**
    * 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) {
                $mediaRelativePath=$this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
                $logoPath=$mediaRelativePath.$item['logo'];
                $item[$fieldName . '_src'] = $logoPath;
                $item[$fieldName . '_alt'] = $this->getAlt($item);
                $item[$fieldName . '_link'] = $this->urlBuilder->getUrl(
                    'brand/manage/edit',
                    ['brand_id' => $item['brand_id'], 'store' => $this->context->getRequestParam('store')]
                );
                $item[$fieldName . '_orig_src'] = $logoPath;

            }
        }

        return $dataSource;
    }

    /**
    * @param array $row
    *
    * @return null|string
    */
    protected function getAlt($row)
    {
        $altField = self::ALT_FIELD;
        return isset($row[$altField]) ? $row[$altField] : null;
    }
}

ইন prepareDataSourceফাংশন আপনি প্রতিটি কলামের বস্তুর পাবেন।

আশা করি এটা তোমাকে সাহায্য করবে।

Comments

থাম্বনেইল ইমেজের উচ্চতা এবং প্রস্থ দেওয়া কি সম্ভব ..

— সঞ্জয় গোহিল ২

Answer 4

অবশেষে, আমার প্রশ্নের সমাধান আমার আছে। আমি পরামিতি হিসাবে রেন্ডারার ব্লক নাম সহ একটি গ্রিড কলাম যুক্ত করেছি।

$this->addColumn(
    'image',
    array(
        'header' => __('Image'),
        'index' => 'image',
        'renderer'  => '\YourVendor\YourModule\Block\Adminhtml\Inquiry\Grid\Renderer\Image',
    )
);

তারপরে আমি নীচে হিসাবে একটি রেন্ডারার ব্লক তৈরি করেছি:

namespace YourVendor\YourModule\Block\Adminhtml\Inquiry\Grid\Renderer;

use Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer;
use Magento\Framework\Object;
use Magento\Store\Model\StoreManagerInterface;

class Image extends AbstractRenderer
{
    private $_storeManager;
    /**
     * @param \Magento\Backend\Block\Context $context
     * @param array $data
     */
    public function __construct(\Magento\Backend\Block\Context $context, StoreManagerInterface $storemanager, array $data = [])
    {
        $this->_storeManager = $storemanager;
        parent::__construct($context, $data);
        $this->_authorization = $context->getAuthorization();
    }
    /**
     * Renders grid column
     *
     * @param Object $row
     * @return  string
     */
    public function render(Object $row)
    {
        $mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
            \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
        );
        $imageUrl = $mediaDirectory.'/inquiry/images'.$this->_getValue($row);
        return '<img src="'.$imageUrl.'" width="50"/>';
    }
}

আমি আশা করি এটা তোমাকে সাহায্য করবে।

Comments

চেষ্টা করার জন্য ধন্যবাদ, তবে আপনি প্রশ্নটি পড়ার সময় মনোযোগ দেননি। আমি ইউজেন্সি উপাদানগুলির মাধ্যমে তৈরি গ্রিডটি ম্যাজেন্টো 1 এর মতো গ্রিড ব্লকের সাথে না করে ব্যবহার করার চেষ্টা করছি

— মারিয়াস