{"id":38525,"date":"2015-12-30T14:27:05","date_gmt":"2015-12-30T14:27:05","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=38525"},"modified":"2024-08-13T11:51:45","modified_gmt":"2024-08-13T11:51:45","slug":"display-thumbnail-in-admin-grid-magento-2-0","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/","title":{"rendered":"Display an Image Thumbnail using UI Component in the admin Grid in Adobe Commerce (Magento 2)"},"content":{"rendered":"\n

Here we learn that How To Display an Image Thumbnail in Adobe Commerce (Magento 2) admin Grid.<\/p>\n\n\n\n

Overview of UI components<\/h2>\n\n\n\n

Adobe Commerce (Magento 2) UI components are used to represent distinct UI elements, such as tables, buttons, dialogs, and others.<\/em> They are designed for simple and flexible user interface (UI) rendering.<\/p>\n\n\n\n

Components are responsible for rendering the result page fragments and providing\/supporting further interactions of JavaScript components and server. Using UI component we can display an Image thumbnail in grid also.<\/p>\n\n\n\n

We should use UI components as much as possible and tend to do the same in Adobe Commerce (Magento 2) core.<\/p>\n\n\n\n

1. Open the uiComponent File:<\/strong>
app\/code\/Webkul\/Hello\/view\/adminhtml\/ui_component\/hello_index_listing.xml<\/p>\n\n\n\n

2. Add an image column:<\/strong><\/p>\n\n\n\n

<column name="id">\n    <argument name="data" xsi:type="array">\n        <item name="config" xsi:type="array">\n            <item name="filter" xsi:type="string">textRange<\/item>\n            <item name="sorting" xsi:type="string">asc<\/item>\n            <item name="label" xsi:type="string" translate="true">ID<\/item>\n        <\/item>\n    <\/argument>\n<\/column>\n<!-- Image Column -->\n<column name="filename" class="Webkul\\Hello\\Ui\\Component\\Listing\\Columns\\Thumbnail">\n    <argument name="data" xsi:type="array">\n        <item name="config" xsi:type="array">\n            <item name="component" xsi:type="string">Magento_Ui\/js\/grid\/columns\/thumbnail<\/item>\n            <item name="sortable" xsi:type="boolean">false<\/item>\n            <item name="altField" xsi:type="string">name<\/item>\n            <item name="has_preview" xsi:type="string">1<\/item>\n            <item name="label" xsi:type="string" translate="true">Image<\/item>\n            <item name="sortOrder" xsi:type="number">20<\/item>\n        <\/item>\n    <\/argument>\n<\/column><\/pre>\n\n\n\n
 3. Now we create Thumbnail Class:
app\/code\/Webkul\/Hello\/Ui\/Component\/Listing\/Columns\/Thumbnail.php<\/strong><\/p>\n\n\n\n
<?php\nnamespace Webkul\\Blog\\Ui\\Component\\Listing\\Columns;\n\nuse Magento\\Framework\\View\\Element\\UiComponentFactory;\nuse Magento\\Framework\\View\\Element\\UiComponent\\ContextInterface;\n\nclass Thumbnail extends \\Magento\\Ui\\Component\\Listing\\Columns\\Column\n{\n    const NAME = 'thumbnail';\n\n    const ALT_FIELD = 'name';\n\n    \/**\n     * @var \\Webkul\\Blog\\Model\\Hello\\Image\n     *\/\n    protected $imageHelper;\n\n    \/**\n     * @var \\Magento\\Framework\\UrlInterface\n     *\/\n    protected $urlBuilder;\n\n    \/**\n     * @param ContextInterface $context\n     * @param UiComponentFactory $uiComponentFactory\n     * @param \\Webkul\\Blog\\Model\\Image\\Image $imageHelper\n     * @param \\Magento\\Framework\\UrlInterface $urlBuilder\n     * @param array $components\n     * @param array $data\n     *\/\n    public function __construct(\n        ContextInterface $context,\n        UiComponentFactory $uiComponentFactory,\n        \\Webkul\\Blog\\Model\\Hello\\Image $imageHelper,\n        \\Magento\\Framework\\UrlInterface $urlBuilder,\n        array $components = [],\n        array $data = [],\n    ) {\n        parent::__construct($context, $uiComponentFactory, $components, $data);\n        $this->imageHelper = $imageHelper;\n        $this->urlBuilder = $urlBuilder;\n    }\n\n    \/**\n     * Prepare Data Source\n     *\n     * @param array $dataSource\n     * @return array\n     *\/\n    public function prepareDataSource(array $dataSource)\n    {\n        if (isset($dataSource['data']['items'])) {\n            $fieldName = $this->getData('name');\n            foreach ($dataSource['data']['items'] as & $item) {\n                $filename = 'File-1672040965.png';\n                $item[$fieldName . '_src'] = $this->imageHelper->getBaseUrl().$filename;\n                $item[$fieldName . '_alt'] = $this->getAlt($item) ?: $filename;\n                $item[$fieldName . '_orig_src'] = $this->imageHelper->getBaseUrl().$filename;\n            }\n        }\n\n        return $dataSource;\n    }\n\n    \/**\n     * @param array $row\n     *\n     * @return null|string\n     *\/\n    protected function getAlt($row)\n    {\n        $altField = $this->getData('config\/altField') ?: self::ALT_FIELD;\n        return isset($row[$altField]) ? $row[$altField] : null;\n    }\n}<\/pre>\n\n\n\n
4. Now we create Image Class to get the image base path:
app\/code\/Webkul\/Hello<\/strong>\/Model\/Hello\/Image.php<\/strong><\/p>\n\n\n\n
<?php\nnamespace Webkul\\Blog\\Model\\Hello;\n\nuse Magento\\Framework\\UrlInterface;\nuse Magento\\Framework\\Filesystem;\n\nclass Image\n{\n    \/**\n     * media sub folder\n     * @var string\n     *\/\n    protected $subDir = 'webkul\/image\/'; \/\/actual path is pub\/media\/webkul\/image\/\n    \n    \/**\n     * url builder\n     *\n     * @var \\Magento\\Framework\\UrlInterface\n     *\/\n    protected $urlBuilder;\n\n    \/**\n     * @var \\Magento\\Framework\\Filesystem\n     *\/\n    protected $fileSystem;\n    \n    \/**\n     * @param UrlInterface $urlBuilder\n     * @param Filesystem $fileSystem\n     *\/\n    public function __construct(\n        UrlInterface $urlBuilder,\n        Filesystem $fileSystem\n    ) {\n        $this->urlBuilder = $urlBuilder;\n        $this->fileSystem = $fileSystem;\n    }\n\n    \/**\n     * get images base url\n     *\n     * @return string\n     *\/\n    public function getBaseUrl()\n    {\n        return $this->urlBuilder->getBaseUrl(['_type' => UrlInterface::URL_TYPE_MEDIA]).$this->subDir;\n    }\n}<\/pre>\n\n\n\n
\"Display<\/figure>\n\n\n\n
Learn how to use UI components: click here<\/a><\/p>\n\n\n\n
Adobe Commerce (Magento 2) UI components are used to represent distinct UI elements, such as tables, buttons, dialogs<\/em>. Components are responsible for rendering the result page fragments and providing\/supporting further interactions of JavaScript components and server.<\/p>\n\n\n\n
UI components have different settings<\/strong><\/h2>\n\n\n\n
Configuration settings (their list and names) are different among UI components; these settings contain constants, optional and required settings. Developers need to treat every UI component separately.<\/p>\n\n\n\n
For any technical help, please reach out to us at support@webkul.com<\/a>. Additionally, discover a variety of options to enhance your online store\u2019s functionality by visiting the Adobe Commerce plugins<\/a> section.<\/p>\n\n\n\n
If you seek expert assistance or want to develop custom solutions, consider hiring Adobe Commerce Developers<\/a> for your project.<\/p>\n","protected":false},"excerpt":{"rendered":"
Here we learn that How To Display an Image Thumbnail in Adobe Commerce (Magento 2) admin Grid. Overview of UI components Adobe Commerce (Magento 2) UI components are used to represent distinct UI elements, such as tables, buttons, dialogs, and others. They are designed for simple and flexible user interface (UI) rendering. Components are responsible […]<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302],"tags":[2542,12967,2544,2460],"class_list":["post-38525","post","type-post","status-publish","format-standard","hentry","category-magento2","tag-admin-grid","tag-adobe-commerce","tag-image-column-in-admin-grid","tag-magento-2"],"yoast_head":"\nHow To Display an Image Thumbnail in Adobe Commerce<\/title>\n<meta name=\"description\" content=\"Adobe Commerce UI components are used to represent distinct UI elements, such as tables, buttons, dialog, and others.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Display an Image Thumbnail in Adobe Commerce\" \/>\n<meta property=\"og:description\" content=\"Adobe Commerce UI components are used to represent distinct UI elements, such as tables, buttons, dialog, and others.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-30T14:27:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-13T11:51:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/07\/screenshot-nimbusweb.me-2023.07.11-19_04_20-1200x246.png\" \/>\n<meta name=\"author\" content=\"Abhishek Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhishek Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/\"},\"author\":{\"name\":\"Abhishek Singh\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/573e459f54796eb4195511990de4bfd0\"},\"headline\":\"Display an Image Thumbnail using UI Component in the admin Grid in Adobe Commerce (Magento 2)\",\"datePublished\":\"2015-12-30T14:27:05+00:00\",\"dateModified\":\"2024-08-13T11:51:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/\"},\"wordCount\":299,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/07\/screenshot-nimbusweb.me-2023.07.11-19_04_20-1200x246.png\",\"keywords\":[\"admin grid\",\"Adobe Commerce\",\"image column in admin grid\",\"Magento 2\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/\",\"url\":\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/\",\"name\":\"How To Display an Image Thumbnail in Adobe Commerce\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/07\/screenshot-nimbusweb.me-2023.07.11-19_04_20-1200x246.png\",\"datePublished\":\"2015-12-30T14:27:05+00:00\",\"dateModified\":\"2024-08-13T11:51:45+00:00\",\"description\":\"Adobe Commerce UI components are used to represent distinct UI elements, such as tables, buttons, dialog, and others.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/07\/screenshot-nimbusweb.me-2023.07.11-19_04_20.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/07\/screenshot-nimbusweb.me-2023.07.11-19_04_20.png\",\"width\":1205,\"height\":247,\"caption\":\"screenshot-nimbusweb.me-2023.07.11-19_04_20\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Display an Image Thumbnail using UI Component in the admin Grid in Adobe Commerce (Magento 2)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/573e459f54796eb4195511990de4bfd0\",\"name\":\"Abhishek Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d4ac7e0e671bf743359d7e3f140c262d1b16d71106f0a1aeaecca327a2805ae4?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d4ac7e0e671bf743359d7e3f140c262d1b16d71106f0a1aeaecca327a2805ae4?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Abhishek Singh\"},\"description\":\"Adobe Commerce certified Magento developer with over 12 years of experience at Webkul. Passionate about scalable Magento 2-based webshops, AI, and multi-channel integrations, Abhishek consistently delivers innovative and efficient e-commerce solutions that propel businesses forward.\",\"sameAs\":[\"http:\/\/webkul.com\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/abhishek\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Display an Image Thumbnail in Adobe Commerce","description":"Adobe Commerce UI components are used to represent distinct UI elements, such as tables, buttons, dialog, and others.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/","og_locale":"en_US","og_type":"article","og_title":"How To Display an Image Thumbnail in Adobe Commerce","og_description":"Adobe Commerce UI components are used to represent distinct UI elements, such as tables, buttons, dialog, and others.","og_url":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2015-12-30T14:27:05+00:00","article_modified_time":"2024-08-13T11:51:45+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/07\/screenshot-nimbusweb.me-2023.07.11-19_04_20-1200x246.png","type":"","width":"","height":""}],"author":"Abhishek Singh","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Abhishek Singh","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/"},"author":{"name":"Abhishek Singh","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/573e459f54796eb4195511990de4bfd0"},"headline":"Display an Image Thumbnail using UI Component in the admin Grid in Adobe Commerce (Magento 2)","datePublished":"2015-12-30T14:27:05+00:00","dateModified":"2024-08-13T11:51:45+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/"},"wordCount":299,"commentCount":2,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/07\/screenshot-nimbusweb.me-2023.07.11-19_04_20-1200x246.png","keywords":["admin grid","Adobe Commerce","image column in admin grid","Magento 2"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/","url":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/","name":"How To Display an Image Thumbnail in Adobe Commerce","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/07\/screenshot-nimbusweb.me-2023.07.11-19_04_20-1200x246.png","datePublished":"2015-12-30T14:27:05+00:00","dateModified":"2024-08-13T11:51:45+00:00","description":"Adobe Commerce UI components are used to represent distinct UI elements, such as tables, buttons, dialog, and others.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/07\/screenshot-nimbusweb.me-2023.07.11-19_04_20.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/07\/screenshot-nimbusweb.me-2023.07.11-19_04_20.png","width":1205,"height":247,"caption":"screenshot-nimbusweb.me-2023.07.11-19_04_20"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/display-thumbnail-in-admin-grid-magento-2-0\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Display an Image Thumbnail using UI Component in the admin Grid in Adobe Commerce (Magento 2)"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/573e459f54796eb4195511990de4bfd0","name":"Abhishek Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d4ac7e0e671bf743359d7e3f140c262d1b16d71106f0a1aeaecca327a2805ae4?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d4ac7e0e671bf743359d7e3f140c262d1b16d71106f0a1aeaecca327a2805ae4?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Abhishek Singh"},"description":"Adobe Commerce certified Magento developer with over 12 years of experience at Webkul. Passionate about scalable Magento 2-based webshops, AI, and multi-channel integrations, Abhishek consistently delivers innovative and efficient e-commerce solutions that propel businesses forward.","sameAs":["http:\/\/webkul.com"],"url":"https:\/\/webkul.com\/blog\/author\/abhishek\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/38525","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=38525"}],"version-history":[{"count":20,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/38525\/revisions"}],"predecessor-version":[{"id":457533,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/38525\/revisions\/457533"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=38525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=38525"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=38525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}