Magento2 Admin Grid Image Display





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ margin-bottom:0;
}







1
















Note: I am not using UI component




I have a file Grid.php where I have a column image, in this column, image URL is populating



I want to show the image in this column instead of image URL










share|improve this question

























  • want to show thumbnail in grid???

    – Asad Khan
    19 hours ago











  • Yes, could be thumbnail. I have custom grid for a custom table where image url is appearing, I want image against URL in grid

    – Muhammad Anas
    19 hours ago


















1
















Note: I am not using UI component




I have a file Grid.php where I have a column image, in this column, image URL is populating



I want to show the image in this column instead of image URL










share|improve this question

























  • want to show thumbnail in grid???

    – Asad Khan
    19 hours ago











  • Yes, could be thumbnail. I have custom grid for a custom table where image url is appearing, I want image against URL in grid

    – Muhammad Anas
    19 hours ago














1












1








1









Note: I am not using UI component




I have a file Grid.php where I have a column image, in this column, image URL is populating



I want to show the image in this column instead of image URL










share|improve this question

















Note: I am not using UI component




I have a file Grid.php where I have a column image, in this column, image URL is populating



I want to show the image in this column instead of image URL







magento2 grid






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited 16 hours ago







Muhammad Anas

















asked 19 hours ago









Muhammad AnasMuhammad Anas

522217




522217













  • want to show thumbnail in grid???

    – Asad Khan
    19 hours ago











  • Yes, could be thumbnail. I have custom grid for a custom table where image url is appearing, I want image against URL in grid

    – Muhammad Anas
    19 hours ago



















  • want to show thumbnail in grid???

    – Asad Khan
    19 hours ago











  • Yes, could be thumbnail. I have custom grid for a custom table where image url is appearing, I want image against URL in grid

    – Muhammad Anas
    19 hours ago

















want to show thumbnail in grid???

– Asad Khan
19 hours ago





want to show thumbnail in grid???

– Asad Khan
19 hours ago













Yes, could be thumbnail. I have custom grid for a custom table where image url is appearing, I want image against URL in grid

– Muhammad Anas
19 hours ago





Yes, could be thumbnail. I have custom grid for a custom table where image url is appearing, I want image against URL in grid

– Muhammad Anas
19 hours ago










2 Answers
2






active

oldest

votes


















2














I have figured out the solution of this:



In my Grid.php I have used 'frame_callback' function like this:



$this->addColumn(
'image',
[
'header' => __('Image'),
'index' => 'image',
'type' => 'image',
'frame_callback' => array($this, 'show_image'),
]
);


After this, I have added show_image function at the end of the file:



public function show_image($value)
{
if (empty($value)){
return '';
}
$objectManager = MagentoFrameworkAppObjectManager::getInstance();
$mediaUrl = $objectManager->get('MagentoStoreModelStoreManagerInterface')->getStore()->getBaseUrl(MagentoFrameworkUrlInterface::URL_TYPE_MEDIA);
$width = 150;
return "<img src='" . $mediaUrl . $value . "' width='" . $width . "'/>";
}


After this, image is now appearing on my custom grid.






share|improve this answer
























  • you can use my code that is correct method and Do not use directly object manager magento.stackexchange.com/questions/117098/…

    – Rakesh Donga
    18 hours ago



















2














In your Grid.php define like below



$this->addColumn(
'image',
array(
'header' => __('Image'),
'index' => 'image',
'renderer' => 'VendornameModulenameBlockAdminhtmlModulenameGridRendererImage',
)
);


Create Image.php under




VendornameModulenameBlockAdminhtmlModulenameGridRenderer




and paste below code



namespace VendornameModulenameBlockAdminhtmlModulenameGridRenderer;

class Image extends MagentoBackendBlockWidgetGridColumnRendererAbstractRenderer
{
protected $_storeManager;


public function __construct(
MagentoBackendBlockContext $context,
MagentoStoreModelStoreManagerInterface $storeManager,
array $data =
) {
parent::__construct($context, $data);
$this->_storeManager = $storeManager;
}


public function render(MagentoFrameworkDataObject $row)
{
$img;
$mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
MagentoFrameworkUrlInterface::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;
}
}





share|improve this answer



















  • 1





    I have used frame_callback function and it is working fine for me. But it could also be done through renderer that you have mentioned. Thanks for the effort. +1

    – Muhammad Anas
    18 hours ago












Your Answer








StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f269492%2fmagento2-admin-grid-image-display%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









2














I have figured out the solution of this:



In my Grid.php I have used 'frame_callback' function like this:



$this->addColumn(
'image',
[
'header' => __('Image'),
'index' => 'image',
'type' => 'image',
'frame_callback' => array($this, 'show_image'),
]
);


After this, I have added show_image function at the end of the file:



public function show_image($value)
{
if (empty($value)){
return '';
}
$objectManager = MagentoFrameworkAppObjectManager::getInstance();
$mediaUrl = $objectManager->get('MagentoStoreModelStoreManagerInterface')->getStore()->getBaseUrl(MagentoFrameworkUrlInterface::URL_TYPE_MEDIA);
$width = 150;
return "<img src='" . $mediaUrl . $value . "' width='" . $width . "'/>";
}


After this, image is now appearing on my custom grid.






share|improve this answer
























  • you can use my code that is correct method and Do not use directly object manager magento.stackexchange.com/questions/117098/…

    – Rakesh Donga
    18 hours ago
















2














I have figured out the solution of this:



In my Grid.php I have used 'frame_callback' function like this:



$this->addColumn(
'image',
[
'header' => __('Image'),
'index' => 'image',
'type' => 'image',
'frame_callback' => array($this, 'show_image'),
]
);


After this, I have added show_image function at the end of the file:



public function show_image($value)
{
if (empty($value)){
return '';
}
$objectManager = MagentoFrameworkAppObjectManager::getInstance();
$mediaUrl = $objectManager->get('MagentoStoreModelStoreManagerInterface')->getStore()->getBaseUrl(MagentoFrameworkUrlInterface::URL_TYPE_MEDIA);
$width = 150;
return "<img src='" . $mediaUrl . $value . "' width='" . $width . "'/>";
}


After this, image is now appearing on my custom grid.






share|improve this answer
























  • you can use my code that is correct method and Do not use directly object manager magento.stackexchange.com/questions/117098/…

    – Rakesh Donga
    18 hours ago














2












2








2







I have figured out the solution of this:



In my Grid.php I have used 'frame_callback' function like this:



$this->addColumn(
'image',
[
'header' => __('Image'),
'index' => 'image',
'type' => 'image',
'frame_callback' => array($this, 'show_image'),
]
);


After this, I have added show_image function at the end of the file:



public function show_image($value)
{
if (empty($value)){
return '';
}
$objectManager = MagentoFrameworkAppObjectManager::getInstance();
$mediaUrl = $objectManager->get('MagentoStoreModelStoreManagerInterface')->getStore()->getBaseUrl(MagentoFrameworkUrlInterface::URL_TYPE_MEDIA);
$width = 150;
return "<img src='" . $mediaUrl . $value . "' width='" . $width . "'/>";
}


After this, image is now appearing on my custom grid.






share|improve this answer













I have figured out the solution of this:



In my Grid.php I have used 'frame_callback' function like this:



$this->addColumn(
'image',
[
'header' => __('Image'),
'index' => 'image',
'type' => 'image',
'frame_callback' => array($this, 'show_image'),
]
);


After this, I have added show_image function at the end of the file:



public function show_image($value)
{
if (empty($value)){
return '';
}
$objectManager = MagentoFrameworkAppObjectManager::getInstance();
$mediaUrl = $objectManager->get('MagentoStoreModelStoreManagerInterface')->getStore()->getBaseUrl(MagentoFrameworkUrlInterface::URL_TYPE_MEDIA);
$width = 150;
return "<img src='" . $mediaUrl . $value . "' width='" . $width . "'/>";
}


After this, image is now appearing on my custom grid.







share|improve this answer












share|improve this answer



share|improve this answer










answered 18 hours ago









Muhammad AnasMuhammad Anas

522217




522217













  • you can use my code that is correct method and Do not use directly object manager magento.stackexchange.com/questions/117098/…

    – Rakesh Donga
    18 hours ago



















  • you can use my code that is correct method and Do not use directly object manager magento.stackexchange.com/questions/117098/…

    – Rakesh Donga
    18 hours ago

















you can use my code that is correct method and Do not use directly object manager magento.stackexchange.com/questions/117098/…

– Rakesh Donga
18 hours ago





you can use my code that is correct method and Do not use directly object manager magento.stackexchange.com/questions/117098/…

– Rakesh Donga
18 hours ago













2














In your Grid.php define like below



$this->addColumn(
'image',
array(
'header' => __('Image'),
'index' => 'image',
'renderer' => 'VendornameModulenameBlockAdminhtmlModulenameGridRendererImage',
)
);


Create Image.php under




VendornameModulenameBlockAdminhtmlModulenameGridRenderer




and paste below code



namespace VendornameModulenameBlockAdminhtmlModulenameGridRenderer;

class Image extends MagentoBackendBlockWidgetGridColumnRendererAbstractRenderer
{
protected $_storeManager;


public function __construct(
MagentoBackendBlockContext $context,
MagentoStoreModelStoreManagerInterface $storeManager,
array $data =
) {
parent::__construct($context, $data);
$this->_storeManager = $storeManager;
}


public function render(MagentoFrameworkDataObject $row)
{
$img;
$mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
MagentoFrameworkUrlInterface::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;
}
}





share|improve this answer



















  • 1





    I have used frame_callback function and it is working fine for me. But it could also be done through renderer that you have mentioned. Thanks for the effort. +1

    – Muhammad Anas
    18 hours ago
















2














In your Grid.php define like below



$this->addColumn(
'image',
array(
'header' => __('Image'),
'index' => 'image',
'renderer' => 'VendornameModulenameBlockAdminhtmlModulenameGridRendererImage',
)
);


Create Image.php under




VendornameModulenameBlockAdminhtmlModulenameGridRenderer




and paste below code



namespace VendornameModulenameBlockAdminhtmlModulenameGridRenderer;

class Image extends MagentoBackendBlockWidgetGridColumnRendererAbstractRenderer
{
protected $_storeManager;


public function __construct(
MagentoBackendBlockContext $context,
MagentoStoreModelStoreManagerInterface $storeManager,
array $data =
) {
parent::__construct($context, $data);
$this->_storeManager = $storeManager;
}


public function render(MagentoFrameworkDataObject $row)
{
$img;
$mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
MagentoFrameworkUrlInterface::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;
}
}





share|improve this answer



















  • 1





    I have used frame_callback function and it is working fine for me. But it could also be done through renderer that you have mentioned. Thanks for the effort. +1

    – Muhammad Anas
    18 hours ago














2












2








2







In your Grid.php define like below



$this->addColumn(
'image',
array(
'header' => __('Image'),
'index' => 'image',
'renderer' => 'VendornameModulenameBlockAdminhtmlModulenameGridRendererImage',
)
);


Create Image.php under




VendornameModulenameBlockAdminhtmlModulenameGridRenderer




and paste below code



namespace VendornameModulenameBlockAdminhtmlModulenameGridRenderer;

class Image extends MagentoBackendBlockWidgetGridColumnRendererAbstractRenderer
{
protected $_storeManager;


public function __construct(
MagentoBackendBlockContext $context,
MagentoStoreModelStoreManagerInterface $storeManager,
array $data =
) {
parent::__construct($context, $data);
$this->_storeManager = $storeManager;
}


public function render(MagentoFrameworkDataObject $row)
{
$img;
$mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
MagentoFrameworkUrlInterface::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;
}
}





share|improve this answer













In your Grid.php define like below



$this->addColumn(
'image',
array(
'header' => __('Image'),
'index' => 'image',
'renderer' => 'VendornameModulenameBlockAdminhtmlModulenameGridRendererImage',
)
);


Create Image.php under




VendornameModulenameBlockAdminhtmlModulenameGridRenderer




and paste below code



namespace VendornameModulenameBlockAdminhtmlModulenameGridRenderer;

class Image extends MagentoBackendBlockWidgetGridColumnRendererAbstractRenderer
{
protected $_storeManager;


public function __construct(
MagentoBackendBlockContext $context,
MagentoStoreModelStoreManagerInterface $storeManager,
array $data =
) {
parent::__construct($context, $data);
$this->_storeManager = $storeManager;
}


public function render(MagentoFrameworkDataObject $row)
{
$img;
$mediaDirectory = $this->_storeManager->getStore()->getBaseUrl(
MagentoFrameworkUrlInterface::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;
}
}






share|improve this answer












share|improve this answer



share|improve this answer










answered 18 hours ago









Rakesh DongaRakesh Donga

2,415316




2,415316








  • 1





    I have used frame_callback function and it is working fine for me. But it could also be done through renderer that you have mentioned. Thanks for the effort. +1

    – Muhammad Anas
    18 hours ago














  • 1





    I have used frame_callback function and it is working fine for me. But it could also be done through renderer that you have mentioned. Thanks for the effort. +1

    – Muhammad Anas
    18 hours ago








1




1





I have used frame_callback function and it is working fine for me. But it could also be done through renderer that you have mentioned. Thanks for the effort. +1

– Muhammad Anas
18 hours ago





I have used frame_callback function and it is working fine for me. But it could also be done through renderer that you have mentioned. Thanks for the effort. +1

– Muhammad Anas
18 hours ago


















draft saved

draft discarded




















































Thanks for contributing an answer to Magento Stack Exchange!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f269492%2fmagento2-admin-grid-image-display%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Knooppunt Holsloot

Altaar (religie)

Gregoriusmis