系统学习magento二次开发，推荐小册：《Magento中文全栈二次开发 》
本小册面向Magento2以上版本，书代码及示例兼容magento2.0-2.4版本。涵盖了magento前端开发，后端开发，magento2主题,magento2重写,magento2 layout,magento2控制器,magento2 block等相关内容,带领您成为magento开发技术专家。
Magento 2中的ThumbnailColumn组件是用于在后台管理区域中显示缩略图的组件。它通常用于产品、类别等列表页面中，以显示相关项目的图片。
下面是一个简单的Magento 2 ThumbnailColumn组件示例：
首先，创建一个新的Magento 2模块（如果你还没有创建）。
在你的模块目录中创建一个新的PHP类，例如：My_Module\Block\Adminhtml\Product\ThumbnailColumn
在这个PHP类中，添加以下代码：
<?php
namespace My\Module\Block\Adminhtml\Product;
use Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer;
use Magento\Framework\DataObject;
class ThumbnailColumn extends AbstractRenderer
{
/**
* Render the column value
*
* @param \Magento\Framework\DataObject $row
* @return string
*/
public function render(DataObject $row)
{
$imageUrl = $this->_getValue($row);
if (!$imageUrl) {
return '';
}
$thumbnailUrl = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . 'catalog/product' . $imageUrl;
return '<img src="' . $thumbnailUrl . '" />';
}
}这个PHP类继承了Magento 2中的Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer类，并覆盖了其中的render()方法。在这个方法中，我们首先检查列的值是否存在，如果不存在，我们返回空字符串。否则，我们使用Magento的存储管理器来获取产品图像的缩略图URL，并将其包装在<img>标记中返回。
在你的模块目录中创建一个新的布局XML文件，例如：my_module_product_listing.xml，并将以下代码添加到该文件中：
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="content"> <block class="Magento\Catalog\Block\Adminhtml\Product\Grid" name="adminhtml.catalog.product.grid"> <arguments> <argument name="id" xsi:type="string">productGrid</argument> <argument name="dataSource" xsi:type="object">Magento\Catalog\Model\ResourceModel\Product\Grid\Collection</argument> <argument name="default_sort" xsi:type="string">entity_id</argument> <argument name="default_dir" xsi:type="string">desc</argument> <argument name="save_parameters_in_session" xsi:type="string">1</argument> </arguments> <block class="My\Module\Block\Adminhtml\Product\ThumbnailColumn" name="adminhtml.catalog.product.grid.column.thumbnail" as="thumbnail"> <arguments> <argument name="header" xsi:type="string" translate="true">Thumbnail</argument> <argument name="index" xsi:type="string">thumbnail</argument> <argument name="frame_callback" xsi:type="array"> <item name="My_Module_Block_Adminhtml_Product_ThumbnailColumn" xsi:type="string">getThumbnail</item> <item name="Magento\Backend\Block\Widget\Grid\Column" xsi:type="string">decorateDataWithVarienObject</item> </argument> <argument name="sortable" xsi:type="string"></argument> <argument name="filter" xsi:type="string">false</argument> <argument name="renderer" xsi:type="string">My\Module\Block\Adminhtml\Product\ThumbnailColumn</argument> </arguments> </block> <!-- Add other columns here --> <block class="Magento\Backend\Block\Widget\Grid\Export" name="adminhtml.catalog.product.grid.export" as="grid.export"> <arguments> <argument name="exportTypes" xsi:type="array"> <item name="csv" xsi:type="array"> <item name="value" xsi:type="string">csv</item> <item name="label" xsi:type="string" translate="true">CSV</item> </item> <item name="excel" xsi:type="array"> <item name="value" xsi:type="string">excel</item> <item name="label" xsi:type="string" translate="true">Excel</item> </item> </argument> </arguments> </block> </block> </referenceContainer> </body> </page> ```
这个XML文件定义了Magento 2后台管理区域中产品列表的布局。我们在其中定义了一个My\Module\Block\Adminhtml\Product\ThumbnailColumn类的实例，并将其作为产品列表的一列进行渲染。我们还为这一列定义了标题、索引和渲染器。
最后，在Magento 2中注册你的模块并刷新缓存。
这样，Magento 2后台管理区域中的产品列表页面将包含一个缩略图列，其中显示了每个产品的缩略图。