Set custom image role for product in Magento 2

Posted on 22 August, 2017

When working on web development projects, many of our clients request to modify the default functionality of attribute in Magento2. One of those requirements is to add a custom role for product images. By default Magento 2 provides four types of image roles: Base, Small, Thumbnail & Swatch. Below note will allow you to create your own image role and set it for product images.

In admin panel, select Stores > Attributes > Product. Then click on 'Add New Attribute'. Let’s create attribute named 'Diamond Icon'. Give attribute name you want to create as I have gaven Diamond icons and then select Catalog Input Type as Media image. Now save the attribute.

Now you can see your custom attribute in Product attribute list. Now we need to assign that attribute in proper attribute set. For that, go to Stores > Attributes > Attribute set. Now select the particular attribute set in which you want to add your custom attribute. Drag and drop your custom attribute in images group as shown in the image below.

Now upload diamond icon in product. To upload diamond icon go to Products > Catalog and click on edit. Now go to images and videos and upload an image.

Now click on top left grid button to set the image type. Select the image role as Diamond Icon. If you don’t want to display this image in product gallery listing in product page then select option 'Hide from Product Page'.

Now, how to resize image? We need this image as an icon so it should be of 50 px * 50 px.

Open the view.xml file from below location of your current theme:   App/<vendor>/<Theme>/etc/view.xml

If it is not there then copy file from its parent category. Then after define image attribute in Magento Catalog:

1
2
3
4
5
<images module="Magento_Catalog">
    <image id="diamond_icon" type="diamond_icon">
        <width>50</width>
        <height>50</height>
    </image>

In your custom phtml file:

1
2
3
4
5
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$mediaUrl $objectManager->get('Magento\Store\Model\StoreManagerInterface')
             ->getStore()
             ->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
                                

Now write the following code in foreach loop:

1
2
$diamondIcon=$_product->getResource()->getAttribute('diamond_icon')->getFrontend()->getValue($_product);
                                

And then add image tag to display custom attribute in product listing page.

1
<img src=" <?php echo $mediaUrl."catalog/product".$diamondIcon ?>" />                      

Now, you need to set the “Used in Product Listing” option under "Storefront property" menu as 'Yes'. But for that you have to follow the below steps:

Because of some bug of Magento, when you edit media image type attribute, then the menu of “Storefront Properties” would be hidden. From that menu you need to change the value of “Used in Product Listing”. So first of all you need to unhide that menu from the inspect element of your browser. Press F12 and inspect the ‘ATTRIBUTE INFORMATION’ portion of the attribute edit grid. Inside that <div> there are 3 <li> tags out of which the third is given "display: none" style.

Change it to "display: block". Now you can view the third menu named “Storefront properties” from where you need to set the property “Used in Product Listing” as Yes.

That's it, now you are done with setting custom image role. Do let me know your views in the comments and share it with your team!


Nimita Gajera , eCommerce Project Manager

Magento Technical Notes

About Emipro

Being an emerging leader in IT market since 2011, Emipro Technologies Pvt. Ltd. has been providing a wide range of business solutions in Odoo & Magento. We are pleased to have a large pool of contented customers with our meticulous work in the domain of ERP & e-Commerce. Our customers are companies of all sizes ranging from startups to large enterprises who realize that they need a professional internet solution to generate revenue streams, establish proper communication channels, to achieve desired goals and streamline business operations. [....] Read More

Our writings seems informative ?

Subscribe for our Magento Technical Notes and get more amazing stuff directly to your inbox!

Post Your Review

X

Your Review has been posted

2 Comment(s)

Posted on 3 October, 2017

Hello Surendra,

Yes, you can use this custom role when we import product images using CSV file.

Thank you!

Surendra

Posted on 2 October, 2017

can we use this role when we import product images using csv?