Breadcrumb Image: Add Category Attribute for Upload Image in Magento 2

In this article, I am going to explaining how we can add custom image icons in the breadcrumb section on the list page and product detail page. Through this module, you can add custom category attributes for Breadcrumb Image upload and can save those images.

Category Breadcumb Image Upload

 

Create Module For Category Breadcrumb Image Upload

In order to get the brand icon on the list page and product details page breadcrumb section, you have to create a module that can create custom category attributes and upload the images or brand icon images in the breadcrumb section for the list page and detail page.

app/code/Wishusucess/CategoryBreadcrumbImage/registration.php

app/code/Wishusucess/CategoryBreadcrumbImage/etc/module.xml

app/code/Wishusucess/CategoryBreadcrumbImage/etc/di.xml

app/code/Wishusucess/CategoryBreadcrumbImage/etc/adminhtml/routes.xml

app/code/Wishusucess/CategoryBreadcrumbImage/Setup/InstallData.php

app/code/Wishusucess/CategoryBreadcrumbImage/Model/Category/DataProvider.php

app/code/Wishusucess/CategoryBreadcrumbImage/Controller/Adminhtml/Category/BreadcrumbImage/Upload.php

app/code/Wishusucess/CategoryBreadcrumbImage/view/adminhtml/ui_component/category_form.xml

 

Register Breadcrumb image Module

app/code/Wishusucess/CategoryBreadcrumbImage/registration.php

<?php
/*
* @Author Hemant Singh
* @Developer Hemant Singh
* @Module Wishusucess_CategoryBreadcrumbImage
* @copyright Copyright (c) Wishusucess (http://www.wishusucess.com/)
*/
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Wishusucess_CategoryBreadcrumbImage',
__DIR__
);

 

Give Basic information About Module

app/code/Wishusucess/CategoryBreadcrumbImage/etc/module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Wishusucess_CategoryBreadcrumbImage" setup_version="1.0.0">
</module>
</config>

 

Create Dependency Injection File

This di.xml basically we use for ( rewrite ) preference of a particular class. So through this file, we can inform the Magento core class to replace with a new class or existing class arguments.

app/code/Wishusucess/CategoryBreadcrumbImage/etc/di.xml

<?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="Wishusucess\CategoryBreadcrumbImage\Controller\Adminhtml\Category\BreadcrumbImage\Upload">
<arguments>
<argument name="imageUploader" xsi:type="object">CategoryImageUpload</argument>
</arguments>
</type>
<virtualType name="CategoryImageUpload" type="Magento\Catalog\Model\ImageUploader">
<arguments>
<argument name="baseTmpPath" xsi:type="string">catalog/category/tmp</argument>
<argument name="basePath" xsi:type="string">catalog/category</argument>
<argument name="allowedExtensions" xsi:type="array">
<item name="jpg" xsi:type="string">jpg</item>
<item name="jpeg" xsi:type="string">jpeg</item>
<item name="gif" xsi:type="string">gif</item>
<item name="png" xsi:type="string">png</item>
</argument>
</arguments>
</virtualType>
<preference for="Magento\Catalog\Model\Category\DataProvider" type="Wishusucess\CategoryBreadcrumbImage\Model\Category\DataProvider" />
</config>

 

Define Routes ID

In Magento 2 Shopping applications routing basically we use to provide the data from a URL request to the appropriate class for processing. Magento 2 has some format to define the route ID like the below syntax.

<store-url>/<store-code>/<front-name>/<controller-name>/<action-name>

app/code/Wishusucess/CategoryBreadcrumbImage/etc/adminhtml/routes.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin">
<route id="breadcrumbimage" frontName="breadcrumbimage">
<module name="Wishusucess_CategoryBreadcrumbImage" before="Magento_Backend" />
</route>
</router>
</config>

 

Create Custom Category Image Upload Attribute

Using this InstallSchame.php file we can create a custom category attribute to upload the brand image on the list page breadcrumb section and as well as product detail page breadcrumb section.

$setup->addAttribute(
\Magento\Catalog\Model\Category::ENTITY, 'breadcrumb_image');

In the above code, we have decided on a custom category which is "breadcrumb_image" and we will use this identifier view/adminhtml/ui_component/category_form.xml to get the data from Magento admin.

app/code/Wishusucess/CategoryBreadcrumbImage/Setup/InstallData.php

<?php
/*
* @Author Hemant Singh
* @Developer Hemant Singh
* @Module Wishusucess_CategoryBreadcrumbImage
* @copyright Copyright (c) Wishusucess (http://www.wishusucess.com/)
*/
namespace Wishusucess\CategoryBreadcrumbImage\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;
use Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface;

/**
* @codeCoverageIgnore
*/
class InstallData implements InstallDataInterface
{
/**
* EAV setup factory.
*
* @var EavSetupFactory
*/
private $_eavSetupFactory;
protected $categorySetupFactory;

/**
* Init.
*
* @param EavSetupFactory $eavSetupFactory
*/
public function __construct(EavSetupFactory $eavSetupFactory, \Magento\Catalog\Setup\CategorySetupFactory $categorySetupFactory)
{
$this->_eavSetupFactory = $eavSetupFactory;
$this->categorySetupFactory = $categorySetupFactory;
}

/**
* {@inheritdoc}
*
* @SuppressWarnings(PHPMD.ExcessiveMethodLength)
*/
public function install(
ModuleDataSetupInterface $setup,
ModuleContextInterface $context
) {
/** @var EavSetup $eavSetup */
$eavSetup = $this->_eavSetupFactory->create(['setup' => $setup]);
$setup = $this->categorySetupFactory->create(['setup' => $setup]); 
$setup->addAttribute(
\Magento\Catalog\Model\Category::ENTITY, 'breadcrumb_image', [
'type' => 'varchar',
'label' => 'Breadcrumb Image',
'input' => 'image',
'backend' => 'Magento\Catalog\Model\Category\Attribute\Backend\Image',
'required' => false,
'sort_order' => 9,
'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
'group' => 'General Information',
]
);
}
}

 

Create Model Class for Custom Upload Image Attribute in Magento 2

Here Model class we will use to process over the breadcrumb_image attribute and do data operations like create, read, update and delete, on a database.

app/code/Wishusucess/CategoryBreadcrumbImage/Model/Category/DataProvider.php

$fields = parent::getFieldsMap();
$fields['content'][] = 'breadcrumb_image'; // breadcrumb image field

In the above code we have mapped the breadcrumb_image attribute field.

<?php
/*
* @Author Hemant Singh
* @Developer Hemant Singh
* @Module Wishusucess_CategoryBreadcrumbImage
* @copyright Copyright (c) Wishusucess (http://www.wishusucess.com/)
*/
namespace Wishusucess\CategoryBreadcrumbImage\Model\Category;

class DataProvider extends \Magento\Catalog\Model\Category\DataProvider
{

protected function getFieldsMap()
{
$fields = parent::getFieldsMap();
$fields['content'][] = 'breadcrumb_image'; // breadcrumb image field

return $fields;
}
}

 

Breadcrumb Image Upload Class in Magento 2

This controller class basically follow the actual operation on breadcrumb_image. This class has execute() method which  contain action to do.

app/code/Wishusucess/CategoryBreadcrumbImage/Controller/Adminhtml/Category/BreadcrumbImage/Upload.php

<?php
/*
* @Author Hemant Singh
* @Developer Hemant Singh
* @Module Wishusucess_CategoryBreadcrumbImage
* @copyright Copyright (c) Wishusucess (http://www.wishusucess.com/)
*/
namespace Wishusucess\CategoryBreadcrumbImage\Controller\Adminhtml\Category\BreadcrumbImage;

use Magento\Framework\Controller\ResultFactory;

/**
* Class Upload
*/
class Upload extends \Magento\Backend\App\Action
{
/**
* Image uploader
*
* @var \Magento\Catalog\Model\ImageUploader
*/
protected $imageUploader;

/**
* Uploader factory
*
* @var \Magento\MediaStorage\Model\File\UploaderFactory
*/
private $uploaderFactory;

/**
* Media directory object (writable).
*
* @var \Magento\Framework\Filesystem\Directory\WriteInterface
*/
protected $mediaDirectory;

/**
* Store manager
*
* @var \Magento\Store\Model\StoreManagerInterface
*/
protected $storeManager;

/**
* Core file storage database
*
* @var \Magento\MediaStorage\Helper\File\Storage\Database
*/
protected $coreFileStorageDatabase;

/**
* @var \Psr\Log\LoggerInterface
*/
protected $logger;

/**
* Upload constructor.
*
* @param \Magento\Backend\App\Action\Context $context
* @param \Magento\Catalog\Model\ImageUploader $imageUploader
*/
public function __construct(
\Magento\Backend\App\Action\Context $context,
\Magento\Catalog\Model\ImageUploader $imageUploader,
\Magento\MediaStorage\Model\File\UploaderFactory $uploaderFactory,
\Magento\Framework\Filesystem $filesystem,
\Magento\Store\Model\StoreManagerInterface $storeManager,
\Magento\MediaStorage\Helper\File\Storage\Database $coreFileStorageDatabase,
\Psr\Log\LoggerInterface $logger
) {
parent::__construct($context);
$this->imageUploader = $imageUploader;
$this->uploaderFactory = $uploaderFactory;
$this->mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA);
$this->storeManager = $storeManager;
$this->coreFileStorageDatabase = $coreFileStorageDatabase;
$this->logger = $logger;
}

/**
* Check admin permissions for this controller
*
* @return boolean
*/
protected function _isAllowed()
{
return $this->_authorization->isAllowed('Wishusucess_CategoryBreadcrumbImag::category');
}

/**
* Upload file controller action
*
* @return \Magento\Framework\Controller\ResultInterface
*/
public function execute()
{
try {
$result = $this->imageUploader->saveFileToTmpDir('breadcrumb_image');
$result['cookie'] = [
'name' => $this->_getSession()->getName(),
'value' => $this->_getSession()->getSessionId(),
'lifetime' => $this->_getSession()->getCookieLifetime(),
'path' => $this->_getSession()->getCookiePath(),
'domain' => $this->_getSession()->getCookieDomain(),
];
} catch (\Exception $e) {
$result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
}
return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData([[$result]]);
}
}

 

Add field ID in Category Form For Breadcrumb Image

app/code/Wishusucess/CategoryBreadcrumbImage/view/adminhtml/ui_component/category_form.xml

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="cat-breadcrumb-image">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Breadcrumb Image</item>
<item name="collapsible" xsi:type="boolean">true</item>
<item name="sortOrder" xsi:type="number">100</item>
</item>
</argument>
<field name="breadcrumb_image">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="dataType" xsi:type="string">string</item>
<item name="source" xsi:type="string">category</item>
<item name="label" xsi:type="string" translate="true">Breadcrumb Image</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="formElement" xsi:type="string">fileUploader</item>
<item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
<item name="previewTmpl" xsi:type="string">Magento_Catalog/image-preview</item>
<item name="required" xsi:type="boolean">false</item>
<item name="sortOrder" xsi:type="number">40</item>
<item name="uploaderConfig" xsi:type="array">
<item name="url" xsi:type="url" path="catalog/category_image/upload"/>
</item>
</item>
</argument>
</field>
</fieldset>
</form>

 

Now, Run Following Command:

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deplpy -f

php bin/magento cache:clean

 

Download Link:

Category Breadcrumb Image Extension in Magento 2

Hire Magento 2 Expert Developer to Develop Your Store

 

Related Post:

Custom Shipping Text Filed: Show Custom Text Magento 2

Search AutoComplete: Magento 2 Module Add All Category for Search

Share Product on WhatsApp: With Products Image And URL in Magento 2

 

Recommended Post:

Magento 2.4 Installation Guide: How to Install Magento 2.4.2

Magento Store: Best 36 Magento Websites Example in The World

SEO Packages: How Much Do SEO Packages Cost in India, SEO Pricing

Leave a Reply