{"id":12117,"date":"2016-12-20T19:18:11","date_gmt":"2016-12-20T16:18:11","guid":{"rendered":"http:\/\/blog.belvg.com\/?p=12117"},"modified":"2019-12-18T08:22:46","modified_gmt":"2019-12-18T06:22:46","slug":"how-to-add-image-attribute-to-a-category-in-magento-2","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/how-to-add-image-attribute-to-a-category-in-magento-2.html","title":{"rendered":"How to Add Image Attribute to Category in Magento 2"},"content":{"rendered":"\n

It’s much easier to add “Image” attribute during the upgrade or installation process of your module in the following files.<\/p>\n

<\/p>\n

app\/code\/[ Vendor ]\/[ Module ]<\/em>\/Setup\/InstallData.php<\/p>\n

Or here:<\/p>\n

app\/code\/[ Vendor ]\/[ Module ]<\/em>\/Setup\/UpgradeData.php<\/p>\n

Let me show you how to perform it during upgrade<\/h3>\n
public function __construct(\\Magento\\Eav\\Setup\\EavSetupFactory $eavSetupFactory)\r\n{\r\n        $this->eavSetupFactory = $eavSetupFactory;\r\n}\r\n \r\npublic function upgrade(ModuleDataSetupInterface $setup, ModuleContextInterface $context)\r\n{\r\n        $setup->startSetup();\r\n \r\n    \tif (version_compare($context->getVersion(), '9.0.1', '<')) {\r\n            $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);\r\n \r\n            $eavSetup->addAttribute(\r\n                \\Magento\\Catalog\\Model\\Category::ENTITY,\r\n                'image_thumb', [\r\n                    'type'      \t=> 'varchar',\r\n                    'label'      \t=> 'Image - Thumb',\r\n                    'input'     \t=> 'image',\r\n                    'required' \t=> false,\r\n                    'sort_order'  => 6,\r\n                    'backend'\t=> '[ Vendor ]\\[ Module ]\\Model\\Category\\Attribute\\Backend\\Thumb',\r\n                    'global'    \t=> \\Magento\\Eav\\Model\\Entity\\Attribute\\ScopedAttributeInterface::SCOPE_STORE,\r\n                    'group'    \t=> 'General Information',\r\n                ]\r\n        \t);\r\n    \t}\r\n \r\n        $setup->endSetup();\r\n}\r\n<\/pre>\n
The second step you have to do is to add this attribute to a category form:<\/p>\n
app\/code\/[ Vendor ]\/[ Module ]<\/em>\/view\/adminhtml\/ui_component\/category_form.xml<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<form xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd\">\r\n\t<fieldset name=\"content\">\r\n        <argument name=\"data\" xsi:type=\"array\">\r\n            <item name=\"config\" xsi:type=\"array\">\r\n                <item name=\"label\" xsi:type=\"string\" translate=\"true\">Content<\/item>\r\n                <item name=\"collapsible\" xsi:type=\"boolean\">true<\/item>\r\n                <item name=\"sortOrder\" xsi:type=\"number\">99<\/item>\r\n            <\/item>\r\n        <\/argument>\r\n        <field name=\"image_thumb\">\r\n            <argument name=\"data\" xsi:type=\"array\">\r\n                <item name=\"config\" xsi:type=\"array\">\r\n                    <item name=\"dataType\" xsi:type=\"string\">string<\/item>\r\n                    <item name=\"source\" xsi:type=\"string\">category<\/item>\r\n                    <item name=\"label\" xsi:type=\"string\" translate=\"true\">Image - Thumb<\/item>\r\n                    <item name=\"visible\" xsi:type=\"boolean\">true<\/item>\r\n                    <item name=\"formElement\" xsi:type=\"string\">fileUploader<\/item>\r\n                    <item name=\"elementTmpl\" xsi:type=\"string\">ui\/form\/element\/uploader\/uploader<\/item>\r\n                    <item name=\"previewTmpl\" xsi:type=\"string\">Magento_Catalog\/image-preview<\/item>\r\n                    <item name=\"required\" xsi:type=\"boolean\">false<\/item>\r\n \t               <item name=\"sortOrder\" xsi:type=\"number\">40<\/item>\r\n                    <item name=\"uploaderConfig\" xsi:type=\"array\">\r\n                        <item name=\"url\" xsi:type=\"url\" path=\"[ module ]\/category_thumb\/upload\"\/>\r\n                    <\/item>\r\n                <\/item>\r\n            <\/argument>\r\n        <\/field>\r\n    <\/fieldset>\r\n<\/form>\r\n<\/pre>\n
It would be enough for regular attributes, but not in case of the uploaded “image” attribute. Let’s find out what else we should do to add this attribute properly.<\/p>\n
We have already defined the backend model:<\/p>\n
'backend' => '[ Vendor ]\\[ Module ]\\Model\\Category\\Attribute\\Backend\\Thumb',<\/pre>\n
And we have defined another URL for the upload:<\/p>\n
<item name=\"url\" xsi:type=\"url\" path=\"[ module ]\/category_thumb\/upload\"\/><\/pre>\n
Probably you are wondering, why do we need another Controller and a new Model? Why can’t we use the default controller and model, that is already defined in the “Image” attribute:<\/p>\n
vendor\/magento\/module-catalog\/Model\/Category\/Attribute\/Backend\/Image.php<\/em><\/p>\n
vendor\/magento\/module-catalog\/Controller\/Adminhtml\/Category\/Image\/Upload.php<\/em><\/p>\n
<\/a>
Magento Audit<\/h3>
Take your online store to the next level with BelVG Magento Audit<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
The answer is pretty simple: Magento 2.1.2 still has some versatility issues and code of attribute is placed right in the files. But we have our own attribute, that’s why we should create a new one:<\/p>\n
app\/code\/[ Vendor ]\/[ Module ]\/Controller\/Adminhtml\/Category\/Thumb\/Upload.php<\/em><\/p>\n
<?php\r\nnamespace [ Vendor ]\\[ Module ]\\Controller\\Adminhtml\\Category\\Thumb;\r\nuse Magento\\Framework\\Controller\\ResultFactory;\r\n \r\nclass Upload extends \\Magento\\Backend\\App\\Action\r\n{\r\n\tprotected $imageUploader;\r\n \r\n\tpublic function __construct(\r\n        \\Magento\\Backend\\App\\Action\\Context $context,\r\n        \\Magento\\Catalog\\Model\\ImageUploader $imageUploader\r\n\t) {\r\n        parent::__construct($context);\r\n        $this->imageUploader = $imageUploader;\r\n\t}\r\n \r\n\tprotected function _isAllowed()\r\n\t{\r\n    \treturn $this->_authorization->isAllowed('Magento_Catalog::categories');\r\n\t}\r\n \r\n\tpublic function execute()\r\n\t{\r\n    \ttry {\r\n            $result = $this->imageUploader->saveFileToTmpDir('image_thumb');\r\n \r\n            $result['cookie'] = [\r\n                'name' \t=> $this->_getSession()->getName(),\r\n                'value' \t=> $this->_getSession()->getSessionId(),\r\n                'lifetime'   => $this->_getSession()->getCookieLifetime(),\r\n           \t 'path'       => $this->_getSession()->getCookiePath(),\r\n                'domain'   => $this->_getSession()->getCookieDomain(),\r\n        \t];\r\n    \t} catch (\\Exception $e) {\r\n            $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];\r\n    \t}\r\n    \treturn $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);\r\n\t}\r\n}\r\n<\/pre>\n
As you can see, the most important thing here is to specify the field in which the uploaded file $this->imageUploader->saveFileToTmpDir(‘image_thumb’)<\/em> should be searched.<\/p>\n
This Controller uploads an image to a temporary directory with the AJAX request. And shows its thumbnail in the admin panel even before the category has been saved.<\/p>\n
Further, we need to define a model, which allows us to save the uploaded file, but now during the category saving process.<\/p>\n
app\/code\/[ Vendor ]\/[ Module ]\/Model\/Category\/Attribute\/Backend\/Thumb.php<\/em><\/p>\n
<?php\r\nnamespace [ Vendor ]\\[ Module ]\\Model\\Category\\Attribute\\Backend;\r\n \r\nclass Thumb extends \\Magento\\Eav\\Model\\Entity\\Attribute\\Backend\\AbstractBackend\r\n{\r\n\tprotected $_uploaderFactory;\r\n\tprotected $_filesystem;\r\n\tprotected $_fileUploaderFactory;\r\n\tprotected $_logger;\r\n\tprivate $imageUploader;\r\n \r\n\tpublic function __construct(\r\n        \\Psr\\Log\\LoggerInterface $logger,\r\n        \\Magento\\Framework\\Filesystem $filesystem,\r\n    \t\\Magento\\MediaStorage\\Model\\File\\UploaderFactory $fileUploaderFactory\r\n\t) {\r\n        $this->_filesystem                = $filesystem;\r\n        $this->_fileUploaderFactory = $fileUploaderFactory;\r\n        $this->_logger                      = $logger;\r\n\t}\r\n \r\n    private function getImageUploader()\r\n\t{\r\n    \tif ($this->imageUploader === NULL) {\r\n            $this->imageUploader = \\Magento\\Framework\\App\\ObjectManager::getInstance()->get(\r\n                '[ Vendor ]\\[ Module ]\\CategoryThumbUpload'\r\n        \t);\r\n    \t}\r\n    \treturn $this->imageUploader;\r\n\t}\r\n \r\n\tpublic function beforeSave($object)\r\n\t{\r\n        $attrCode = $this->getAttribute()->getAttributeCode();\r\n \r\n    \tif (!$object->hasData($attrCode)) {\r\n            $object->setData($attrCode, NULL);\r\n    \t} else {\r\n            $values = $object->getData($attrCode);\r\n        \tif (is_array($values)) {\r\n                if (!empty($values['delete'])) {\r\n                    $object->setData($attrCode, NULL);\r\n                } else {\r\n                    if (isset($values[0]['name']) && isset($values[0]['tmp_name'])) {\r\n                        $object->setData($attrCode, $values[0]['name']);\r\n                    } else {\r\n                        \/\/ don't update\r\n                    }\r\n                }\r\n      \t  }\r\n    \t}\r\n \r\n    \treturn $this;\r\n\t}\r\n \r\n\tpublic function afterSave($object)\r\n\t{\r\n    \t$image = $object->getData($this->getAttribute()->getName(), NULL);\r\n \r\n    \tif ($image !== NULL) {\r\n        \ttry {\r\n                $this->getImageUploader()->moveFileFromTmp($image);\r\n        \t} catch (\\Exception $e) {\r\n                $this->_logger->critical($e);\r\n        \t}\r\n    \t}\r\n \r\n    \treturn $this;\r\n\t}\r\n}\r\n<\/pre>\n
After the AJAX request, imageUploader returns not only an image itself, but an array with the updated data for the category object. And we should write another string to add the attribute to varchar<\/em>.<\/p>\n
beforeSave<\/strong> – transforms received array to a file name.<\/p>\n
afterSave<\/strong> – transfers a file from temporary category to a constant one.<\/p>\n
But there is more to come. We haven’t defined those file types, that could be uploaded. And those categories in which should use the uploaded image.<\/p>\n
However, we already specified the backend model for these configurations. They are defined in the
\napp\/code\/[ Vendor ]\/[ Module ]\/etc\/di.xml<\/em><\/p>\n
<?xml version=\"1.0\"?>\r\n \r\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager\/etc\/config.xsd\">\r\n    <virtualType name=\"[ Vendor ]\\[ Module ]\\CategoryThumbUpload\" type=\"Magento\\Catalog\\Model\\ImageUploader\">\r\n        <arguments>\r\n            <argument name=\"baseTmpPath\" xsi:type=\"string\">catalog\/tmp\/category<\/argument>\r\n            <argument name=\"basePath\" xsi:type=\"string\">catalog\/category<\/argument>\r\n            <argument name=\"allowedExtensions\" xsi:type=\"array\">\r\n                <item name=\"jpg\" xsi:type=\"string\">jpg<\/item>\r\n                <item name=\"jpeg\" xsi:type=\"string\">jpeg<\/item>\r\n                <item name=\"gif\" xsi:type=\"string\">gif<\/item>\r\n                <item name=\"png\" xsi:type=\"string\">png<\/item>\r\n            <\/argument>\r\n        <\/arguments>\r\n    <\/virtualType>\r\n\t<type name=\"[ Vendor ]\\[ Module ]\\Controller\\Adminhtml\\Category\\Thumb\\Upload\">\r\n        <arguments>\r\n            <argument name=\"imageUploader\" xsi:type=\"object\">[ Vendor ]\\[ Module ]\\CategoryThumbUpload<\/argument>\r\n        <\/arguments>\r\n    <\/type>\r\n    <preference for=\"Magento\\Catalog\\Model\\Category\\DataProvider\" type=\"[ Vendor ]\\[ Module ]\\Model\\Category\\DataProvider\" \/>\r\n<\/config>\r\n<\/pre>\n
It seems that we finally finished, but after image uploading and category saving admin panel is getting stucked.<\/p>\n
<\/a>
\"magento
Magento Webdesign<\/h3>
Take your online store to the next level with BelVG Magento Webdesign<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
Additionally we should define the rewrite for DataProvider<\/strong> file in the di.xml<\/strong>: app\/code\/[ Vendor ]\/[ Module ]\/Model\/Category\/DataProvider.php<\/em><\/p>\n
<?php\r\nnamespace [ Vendor ]\\[ Module ]\\Model\\Category;\r\n \r\nclass DataProvider extends \\Magento\\Catalog\\Model\\Category\\DataProvider\r\n{\r\n\tprotected function addUseDefaultSettings($category, $categoryData)\r\n\t{\r\n    \t$data = parent::addUseDefaultSettings($category, $categoryData);\r\n \r\n    \tif (isset($data['image_thumb'])) {\r\n            unset($data['image_thumb']);\r\n \r\n            $objectManager = \\Magento\\Framework\\App\\ObjectManager::getInstance();\r\n            $helper           \t= $objectManager->get('\\[ Vendor ]\\[ Module ]\\Helper\\Data');\r\n \r\n            $data['image_thumb'][0]['name'] = $category->getData('image_thumb');\r\n            $data['image_thumb'][0]['url']  \t= $helper->getCategoryThumbUrl($category);\r\n    \t}\r\n \r\n    \treturn $data;\r\n\t}\r\n \r\n\tprotected function getFieldsMap()\r\n\t{\r\n    \t$fields = parent::getFieldsMap();\r\n        $fields['content'][] = 'image_thumb'; \/\/ NEW FIELD\r\n    \t\r\n    \treturn $fields;\r\n\t}\r\n}\r\n<\/pre>\n
And in the end, we have to display this image on the frontend. There is only a file name in the category data. And the following function will help to create a full URL for it.<\/p>\n
public function getCategoryThumbUrl($category)\r\n{\r\n    $url   = false;\r\n    $image = $category->getImageThumb();\r\n    if ($image) {\r\n        if (is_string($image)) {\r\n            $url = $this->_storeManager->getStore()->getBaseUrl(\r\n                    \\Magento\\Framework\\UrlInterface::URL_TYPE_MEDIA\r\n            ) . 'catalog\/category\/' . $image;\r\n        } else {\r\n            throw new \\Magento\\Framework\\Exception\\LocalizedException(\r\n                    __('Something went wrong while getting the image url.')\r\n            );\r\n        }\r\n    }\r\n\r\n    return $url;\r\n}\r\n<\/pre>\n
Check also:<\/h3>\n
Adding Image Attribute To a Category in Magento 2: Alternative Version<\/a><\/p>\n
<\/a>
\"magento_ico_1.9_customer_images_uploader\"
Customer Images Uploader<\/h3>
Take your online store to the new level with this quality Magento extension by BelVG<\/p>Download here<\/span><\/a><\/div><\/div><\/div>\n
Need to improve product management mechanism and categories visibility? Check out BelVG’s Groups Catalog for Magento 2<\/a> extension.<\/p>\n\n","protected":false},"excerpt":{"rendered":"It’s much easier to add “Image” attribute during the upgrade or installation process of your …","protected":false},"author":22,"featured_media":12118,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[14,389,524],"tags":[],"class_list":["post-12117","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-magento","category-magento2-development","category-magento-speed-optimization","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t