Magento 2 में व्यवस्थापक ग्रिड में एक छवि प्रदर्शित करें

Question

मैं अपने किसी मॉड्यूल के एडमिन ग्रिड में एक छवि प्रदर्शित करना चाहता हूं।
मैं नई ग्रिड प्रणाली का उपयोग कर रहा हूं, जो ui घटकों के साथ है।
मैंने इस बात पर ध्यान दिया कि उत्पादों के लिए थ्रेड को ग्रिड में कैसे जोड़ा जाता है, लेकिन यह मेरे सिर की तरह है।
मेरी इकाई EAV नहीं है, एक साधारण फ्लैट टेबल इकाई है।
मैंने अपने ui घटक xml फ़ाइल में इसे जोड़ने का प्रयास किया

<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>

लेकिन यह मेरे ग्रिड पर कोई प्रभाव नहीं डालता है। कोई छवि नहीं है (मेरे db क्षेत्र को छवि कहा जाता है) स्तंभ, कोई त्रुटि नहीं, कुछ भी नहीं।
क्या कोई ui घटकों का उपयोग करके ग्रिड में एक छवि जोड़कर मुझे चल सकता है?

Answer 1

आपके ui घटक xml में यह जोड़ा जाना चाहिए:

<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>

.. और फिर आपके \ Modulename \ Ui \ Component \ Listing \ Column \ Thumbnail.php में कुछ इस तरह से:

<?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'छवि' लौट रही थी लेकिन मेरे db क्षेत्र को 'url' कहा जाता था। बाकी $item[$fieldName . '***']जगह छोड़ दी गई थी।

— शॉन नॉर्थ्रॉप

धन्यवाद, @MageDevNL। जब हम थंबनेल छवि पर क्लिक करते हैं तो मैं कई छवियां दिखाना चाहूंगा।

— योगेश अग्रवाल

अपने काम को सही। छवि दिखाई गई! लेकिन अब मैं छवि के साथ कुछ पाठ संलग्न करना चाहता हूं। मैं कोशिश करता हूं, लेकिन उपयोगी नहीं। क्या आप मुझे बता सकते हैं कि टेक्स्ट छवि के साथ कैसे जुड़ता है। मैं सिर्फ उत्पाद छवि और नई लाइन उत्पाद

— स्कु

उत्तम ! यह अच्छा काम करता है! हम छवि के साथ कुछ पाठ कैसे जोड़ सकते हैं। मेरे पास उत्पाद छवि है और अब एक ही कॉलम के साथ छवि की नई लाइन पर sku और नाम जोड़ना चाहते हैं। क्या आप मुझे बता सकते हैं कि छवि के साथ कुछ पाठ कैसे संलग्न करें?

— हाफिज उमर

Answer 2

अपने grid.php में नीचे की तरह परिभाषित करें

$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

मुझे लगता है कि आपने प्रश्न को सही नहीं समझा। मेरा ग्रिड UI-घटकों का उपयोग करके बनाया गया है। यह यूआई-घटकों के साथ काम नहीं करता है।

— मारियस

इस जवाब ने मुझे यूआई - घटकों

— मुजाहिद

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

कोशिश करने के लिए धन्यवाद, लेकिन आपने प्रश्न पढ़ते समय ध्यान नहीं दिया। मैं Magento 1 में के रूप में ui नहीं घटकों एक ग्रिड ब्लॉक के साथ के माध्यम से बनाया ग्रिड का उपयोग करने के लिए कोशिश कर रहा हूँ

— मेरियस