In Magento 2, you can add custom fields to the category management section of the admin, such as a thumbnail image for each category. By default, Magento provides options to add a category image, but adding a new field like a thumbnail requires creating a custom extension.
Step-by-Step Process
1. Create the Module Structure
To create the Magento 2 module, start by creating the required directory structure under app/code. The module is now named Skylooper_CategoryThumbnail.
app/code/Skylooper/CategoryThumbnailComplete Directory Structure:
app
└── code
└── Skylooper
└── CategoryThumbnail
├── etc
│ └── module.xml
├── registration.php
├── etc
└── adminhtml
└── di.xml
└── system.xml
├── view
└── adminhtml
└── ui_component
└── category_form.xml
└── Setup
└── InstallData.php2. Create module.xml
In the app/code/Skylooper/CategoryThumbnail/etc/module.xml file, define your module as follows:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Skylooper_CategoryThumbnail" setup_version="1.0.0"/>
</config>3. Create registration.php
In the module root directory, create registration.php to register the module with Magento:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Skylooper_CategoryThumbnail',
__DIR__
);4. Add Category Form Layout
Create the file app/code/Skylooper/CategoryThumbnail/view/adminhtml/ui_component/category_form.xml to include the new thumbnail field in the category form.
<?xml version="1.0"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui/etc/ui_configuration.xsd">
<fieldset name="content">
<field name="thumbnail">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">imageUploader</item>
<item name="label" xsi:type="string" translate="true">Thumbnail</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="required" xsi:type="boolean">false</item>
<item name="sortOrder" xsi:type="number">50</item>
</item>
</argument>
</field>
</fieldset>
</form>5. Define Dependency Injection (di.xml)
Create the di.xml file under app/code/Skylooper/CategoryThumbnail/etc/adminhtml/di.xml for the backend image uploader:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Catalog\Model\Category\DataProvider">
<arguments>
<argument name="meta" xsi:type="array">
<item name="thumbnail" xsi:type="array">
<item name="arguments" xsi:type="array">
<item name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">imageUploader</item>
<item name="label" xsi:type="string" translate="true">Thumbnail</item>
<item name="component" xsi:type="string">Magento_Ui/js/form/element/file-uploader</item>
<item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
<item name="elementTmpl" xsi:type="string">Magento_Ui/form/element/file-uploader</item>
</item>
</item>
</item>
</item>
</argument>
</arguments>
</type>
</config>6. Set Up the Database
Create InstallData.php in app/code/Skylooper/CategoryThumbnail/Setup/InstallData.php to add the new thumbnail attribute.
<?php
namespace Skylooper\CategoryThumbnail\Setup;
use Magento\Eav\Setup\EavSetup;
use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;
class InstallData implements InstallDataInterface
{
private $eavSetupFactory;
public function __construct(EavSetupFactory $eavSetupFactory)
{
$this->eavSetupFactory = $eavSetupFactory;
}
public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
{
/** @var EavSetup $eavSetup */
$eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
$eavSetup->addAttribute(
\Magento\Catalog\Model\Category::ENTITY,
'thumbnail',
[
'type' => 'varchar',
'label' => 'Thumbnail',
'input' => 'image',
'backend' => 'Magento\Catalog\Model\Category\Attribute\Backend\Image',
'required' => false,
'sort_order' => 50,
'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
'group' => 'General Information',
]
);
}
}7. Enable and Install the Module
Run the following commands to enable and install the module:
php bin/magento module:enable Skylooper_CategoryThumbnail
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento cache:clean8. Verify the Thumbnail Field in Admin
Go to Catalog > Categories in the Magento admin panel and edit any category. You should see the new Thumbnail field under the Content section.
Conclusion
You’ve successfully renamed the module to Skylooper_CategoryThumbnail and added the Thumbnail field to the category edit form. This allows admin users to manage category thumbnails easily from the admin panel. You can further customize this module based on your needs.