1

I added a custom image field to magento2 adminhtml grid by following code.

$fieldset->addField(
    'diagram',
    'image',
    [
        'name' => 'diagram',
        'label' => __('Diagram'),
        'title' => __('Diagram'),
        'required' => true, 
        'header' => __('Image'),
        'index' => 'diagram',
        'disabled' => $isElementDisabled
    ]
);

It renders the image with height and width if 22 px. now how could I set height and width to the image.

2
  • try adding 'width' => '15px'
    – Piyush
    Mar 15 '18 at 10:23
  • I already tried this way. Its not working. thanks for your comment
    – swathi_sri
    Mar 15 '18 at 10:24
2

you can customize your image by adding it using renderer

$fieldset->addType(
                'mycustomfield',
                '\Vendor\Modulename\Block\Adminhtml\Modulename\Grid\Renderer\diagram'
            );

$fieldset->addField(
                'diagram',
                'mycustomfield',
                [
                    'name'  => 'diagram',
                    'label' => __('Diagram'),
                    'title' => __('Diagram')
                ]
            );

create a new block Vendor\Modulename\Block\Adminhtml\Modulename\Grid\Renderer\diagram.php

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

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

class diagram extends \Magento\Framework\Data\Form\Element\AbstractElement
{

public function getAfterElementHtml()
{
    $customDiv = '<label><span>Diagram</span></label><div id="customdiv"><img src="[Your Image Path]" width="150px" height="150px"></img></div>';
    return $customDiv;
}

}

0

Try this. Make sure the implementation of _getHeightWidth() must be out side _prepareForm()

$fieldset->addField(
'diagram',
'image',
[
    'name' => 'diagram',
    'label' => __('Diagram'),
    'title' => __('Diagram'),
    'required' => true, 
    'header' => __('Image'),
    'index' => 'diagram',
    'disabled' => $isElementDisabled,
    'after_element_html' => $this->_getHeightWidth()

]
);

protected function _getHeightWidth()
{
   $html.='<script>;

   $(".diagram").css('height','15');
   $(".diagram").css('width','15');

   </script>';
   return $html;
}
7

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.