Adding Image Attribute To a Category in Magento 2: Alternative Version

Jan 5, 2017

2218 Siaržuk Piatroŭski

Adding Image Attribute To a Category in Magento 2: Alternative Version

UPDATED 10.10.17. Beginning from Magento 2.1.8 change from disabled="false" to disabled="true" here: app/code/BelVG/AdditionalImageTemplate/etc/events.xml or in your adapted module. It will fix the bug with category’s image. Be sure to flush Magento cache after making the change.

Recently we published an article dedicated to adding of image attribute to a category in Magento 2. So now, I’d like to share with another way that uses an amazing mechanism in Magento 2, that is called Plugin.

In order to add an image to a category, we have to perform the following steps:

  • To add a required attribute to a category (by Setup during module installation);
  • To create a controller, which will upload selected image;
  • To expand category form, using ui_component (Magento 2 merges configuration files, which let you easily expand particular forms; app/code/BelVG/AdditionalImageTemplate/view/adminhtml/ui_component/category_form.xml);
  • To implement a handler to a category saving event;
  • Do not forget to wrap \Magento\Catalog\Model\Category\DataProvider::getData, using plugin system, for proper image attribute processing.

That’s all concerns backend works, so now let’s get down to frontend.

Igor Dragun

Partner With Us

Let's discuss how to grow your business. Get a Free Quote.
Talk to Igor

To display an image on the category page, it’s preferable when $category->getAdditionalImage() method is being called, it returns a link to the image, but not an attribute value. This is rather convenient for using in templates, that’s why we will create a plugin. It will wrap getData method in \Magento\Catalog\Model\Category models, and when getData is called with a key, which is an attribute, it will process and return the link to the image.
In order to easily navigate in code (link to that code is placed below) you should get acquainted with several parts of Magento 2 Developer Documentation:

To look through and download the source code, please check our GitHub repository.

magento custom development

Magento Custom Development

Take your online store to the next level with BelVG Magento Custom Development

Visit the page
Igor Dragun

Partner With Us

Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Igor

17 Comments

  1. How can i display the image in another block html template (ex: a block i created to show menu in home page) ?

  2. not getting image in custom phtml file where i am getting category form this code
    here is my category load code
    create(‘Magento\Catalog\Model\Category’)->load($catId);
    $subcats = $subcategory->getChildrenCategories();
    $_helper = $this->helper(‘Magento\Catalog\Helper\Output’);
    ?>

    <?php
    echo '

    ';print_r($subcats);die();
    foreach ($subcats as $subcat) {
    $_category = $objectManager->create('Magento\Catalog\Model\Category')->load($subcat->getId());
    $_outputhelper = $this->helper('Magento\Catalog\Helper\Output');
    $subcaturl = $subcat->getUrl();
    $_imgHtml = '';
    if ($_imgUrl = $_category->getImageUrl()) {
    $_imgHtml = '';
    $_imgHtml = $_outputhelper->categoryAttribute($_category, $_imgHtml, 'image');
    / @escapeNotVerified /
    
    } ?>
    
    
    
    <a href="">
    getName(); ?>
    
    
    
    
    
    
    
  3. That fixed the issue. Thank you so much, Sirazuk!

    Note for others with this same issue, be sure to flush magento cache after making the change.

  4. Hello, Tom!
    So, I have a solution. Change from disabled="false" to disabled="true" here:
    app/code/BelVG/AdditionalImageTemplate/etc/events.xml
    or in your adapted module.

  5. Hi Siarzuk,
    Did you have a chance to look at this bug yet? Let me know if you need additional information to replicate it.

  6. In magento 2.1.8, I can upload the image just fine after saving the category. However, when I edit the category with an image already uploaded, after saving the category, the image is no longer uploaded. I have to upload the same image everytime whenever I save the category. How do you fix this bug?

  7. Its showing an error in magento 2.1.5. after saving the image.

    error: “Something went wrong while getting the image url.”
    Please check and help me. Thanks.

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *