I want to display images with a custom role as shown in pictures, now I want to show those images instead of images with a small role on the category page, and I want to do this programmatically? I want to show an image with the custom attribute role that I assigned. enter image description here

  • Do you mean you want to show Top Banner or Top Banner Left image for category pages products? May 30 at 8:39
  • yes, I want to display images that have those top banner image role on the category page. May 30 at 8:45
  • If you set that role that it will show for all products on category page and if doesn't have that image that it will not show any image. May 30 at 8:47
  • how to do this programmatically? May 30 at 8:48
  • Wait let me check May 30 at 8:49

3 Answers 3


You can achieve your requirement by following steps:

Step 1:

Add the below code to your theme view.xml under

<images module="Magento_Catalog">


<image id="product_top_banner" type="top_banner">

Where top_banner is your attribute code. enter image description here

Step 2:

Now open your list.phtml and add the below code just after the foreach started

if ($_product->getTopBanner()) {
    $imageDisplayArea = 'product_top_banner';

enter image description here product_top_banner will the id which you have added on view.xml

Step 3: Also run this query in your database, this is for use the attribute in product listing:

UPDATE catalog_eav_attribute SET used_in_product_listing=1 where attribute_id=(SELECT attribute_id FROM eav_attribute WHERE attribute_code='top_banner' and entity_type_id = 4);

Hope this helps!

  • i used your code in custom module and its giving me error, " 1 exception(s): Exception #0 (Magento\Framework\Exception\LocalizedException): The XML in file "/var/www/html/trainingtasks/app/code/Other/ImageRole/etc/view.xml" is invalid: Element 'images': This element is not expected. Line: 4 " May 30 at 10:00
  • The the code in your theme's etc/view.xml May 30 at 10:35
  • 1
    i resolved the " image element not expected " issue as I was missing a media element in view file May 30 at 10:36

Magento shows products which are having type as a small_image on the category page. This can vary depending on 3rd party theme.

Worth to check type in the etc/view.xml available at the theme level.

<image id="category_page_grid" type="small_image">
<image id="category_page_list" type="small_image">

Change type="small_image" to the role which you want to show.

Type value will be the attribute code of image type.

You have to find the code of the Top Banner Image role may be from the Product Attributes section.

Run the bin/magento clear:cache with bin/magento setup:upgrade should change the image on category pages.

ID category_page_grid is for Grid mode and category_page_list for list mode.

  • if I try to do this in a custom module, I cant use the image tag In the view.xml file? any hints on how to do this in a custom module? May 30 at 9:12
  • 1 exception(s): Exception #0 (Magento\Framework\Exception\LocalizedException): The XML in file "/var/www/html/trainingtasks/app/code/Other/ImageRole/etc/view.xml" is invalid: Element 'images': This element is not expected. Line: 4 May 30 at 10:01

** The Complete Code



<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        <images module="Magento_Catalog">
            <image id="product_top_banner" type="top_banner_image">


 <?php  if ($_product->getTopBannerImage()) {
                        $imageDisplayArea = 'product_top_banner';
                            $imageDisplayArea = 'category_page_grid';

put this code inside foreach function as shown above one of the answers

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.