I have create a form which can upload a image and it saved in to db. in admin side i have a grid to display the table. and it have view action it show all details from db. it only show the image url how to display the image.
2 Answers
Please add below code in you Form.php which located Dyode\Pricebeat\Block\Adminhtml\Form\Edit\Tab here.
$fieldset->addType('productimage', '\Dyode\Pricebeat\Block\Adminhtml\Form\Edit\Tab\ImageRenderer');
$fieldset->addField('product_image_url', 'productimage', array(
'label' => __('Image')
));
And add ImageRenderer.php put there.
<?php
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
namespace Dyode\Pricebeat\Block\Adminhtml\Form\Edit\Tab;
/**
* Description of ImageRenderer
*
* @author dharmendra
*/
class ImageRenderer extends \Magento\Framework\Data\Form\Element\AbstractElement
{
/**
* get category name
* @param DataObject $row
* @return string
*/
public function getElementHtml()
{
// here you can write your code.
$html = '';
if ($this->getValue())
{
$html = $this->getMediaImageHtml($this->getValue());
}
return $html;
}
public function getMediaImageHtml($imageName)
{
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$mediaUrl = $objectManager->get('Magento\Store\Model\StoreManagerInterface')
->getStore()
->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
$html = "<img src='".$mediaUrl.'catalog/product/'.$imageName."' height='100px' width='100px'>";
return $html;
}
}
Still you have any query let me know.
Based on example from my module:
Define a column in the listing with a custom class (MageWorx\ShippingRules\Ui\Component\Listing\Columns\Thumbnail
in example). It should be Magento_Ui/js/grid/columns/thumbnail
component:
<column name="image" class="MageWorx\ShippingRules\Ui\Component\Listing\Columns\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">name</item>
<item name="has_preview" xsi:type="string">1</item>
<item name="label" xsi:type="string" translate="true">Image</item>
<item name="sortOrder" xsi:type="number">62</item>
</item>
</argument>
</column>
Create corresponding class for a column:
<?php
/**
* Copyright © 2017 MageWorx. All rights reserved.
* See LICENSE.txt for license details.
*/
namespace MageWorx\ShippingRules\Ui\Component\Listing\Columns;
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;
use MageWorx\ShippingRules\Helper\Data as Helper;
class Thumbnail extends Column
{
const ALT_FIELD = 'name';
/**
* @var \Magento\Store\Model\StoreManagerInterface
*/
protected $storeManager;
/**
* @var Image
*/
protected $imageHelper;
/**
* @var UrlInterface
*/
protected $urlBuilder;
/**
* @var Helper
*/
protected $helper;
/**
* @param ContextInterface $context
* @param UiComponentFactory $uiComponentFactory
* @param Image $imageHelper
* @param UrlInterface $urlBuilder
* @param StoreManagerInterface $storeManager
* @param Helper $helper
* @param array $components
* @param array $data
*/
public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
Image $imageHelper,
UrlInterface $urlBuilder,
StoreManagerInterface $storeManager,
Helper $helper,
array $components = [],
array $data = []
) {
$this->storeManager = $storeManager;
$this->imageHelper = $imageHelper;
$this->urlBuilder = $urlBuilder;
$this->helper = $helper;
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 = '';
$thumbnailUrl = '';
$link = $this->urlBuilder->getUrl(ExtendedZoneActions::URL_PATH_EDIT, ['id' => $item['entity_id']]);
if ($item[$fieldName] != '') {
$url = $this->helper->getImageUrl($item[$fieldName]);
$thumbnailUrl = $this->helper->getImageUrl($item[$fieldName], Helper::IMAGE_TYPE_THUMBNAIL);
}
$item[$fieldName . '_src'] = $thumbnailUrl;
$item[$fieldName . '_alt'] = $this->getAlt($item) ?: '';
$item[$fieldName . '_link'] = $link;
$item[$fieldName . '_orig_src'] = $url;
}
}
return $dataSource;
}
/**
* @param array $row
*
* @return null|string
*/
protected function getAlt($row)
{
return isset($row[static::ALT_FIELD]) ? $row[static::ALT_FIELD] : null;
}
}
That's all. Do not forget to change all names to the corresponding values from your module. In the example the image
field was used (path to an image has stored inside corresponding column in the database)