Using category images in your magento navigation

For one of our recent Magento projects, we wanted to use category images and category thumbnails in our navigation (and display them on our frontpage). When you are reading this, you probably already are aware of the fact that Magento doesn't support this by default. In order to make the category images (or thumbnails) show up in top.phtml, we'll have to do some small adjustments to the Navigation Class. This is what I end up creating:

Step one
First, create some categories and upload images for them. In my case I created a parent category called 'Producten' and created my 5 child categories, each with a thumbnail image (size 90px x 80px) and a bigger 'Image' (132px x 132px).
 

Step two

Make a copy of  located/frontend/base/default/template/catalog/
navigation/top.phtml to frontend/yourpackage/yourtheme/template/
catalog/navigation/ (create the folders that you miss). Open top.html and add the following between <ul id="nav"></ul>. Replace $_category->getId() == '3' with the id of your parent category:

If you save your top.phtml, you'll see that a new item has been added to your navigation called 'Your parent' (change it to whatever you want). If you hover over it, you'll see that a submenu with the childcategories will appear. The code you just implemented seems a bit chunky, but it's the only way to render childcategories from a specific parent that works either if you have turned 'Use Flat Catalog Category' mode on or off.

Step three
Make a copy of  app/code/core/Mage/Catalog/Block/Navigation.php to app/code/local/Mage/Catalog/Block/ (create the folders that you miss). Open it and add the following functions to the file (doesn't really matter where):

Step four
Make a copy of  app/code/core/Mage/Catalog/Model/Category.php to app/code/local/Mage/Catalog/Model/ (create the folders that you miss). Open it and add the following function to the file, just below the function getImageUrl (line 481).

Step five
Still in Navgation.php, look for the public function drawItem. Replace it with:

Step six
Look for the function _renderCategoryMenuItemHtml. Add an extra parameter to the function: $rendermode, so it looks like:

Step seven
Look for $html[] = $htmlLi; in Navigation.php. Past the following right below it:

Step eight
At last, open your top.phtml once again and look where it says: echo $this->drawItem($child). Replace it with:


Congratulations, if all went right you have now successfully added images to your navigation. In step eight, you can either choose to give 'image' or 'thumbnail' as a parameter. Place a comment if you have a question, happy debugging!

H&O is expert in het oplossen van complexe Magento vraagstukken, maatwerk grafisch ontwerp en het bouwen van custom Magento modules.

Als je op zoek bent naar een partner die je kan helpen met het beantwoorden van moeilijke Magento vragen, een maatwerk productimport voor je ontwikkeld of een custom Magento module voor je schrijft die jouw assortiment met een andere webshop koppelt, dan ben je aan het juiste adres. H&O heeft zich sinds 2007 verdiept in de techniek en ontwikkelingen van het e-commerce CMS, speelt een actieve rol in de community, heeft verschillende modules uitgebracht en heeft voor klanten uiteenlopende technische modules ontwikkeld. Ons kantoor is gevestigd in Roelofarendsveen, direct naast de A4 én slechts op 15 minuten afstand van Amsterdam. Neem contact met ons op en kom eens langs, dan bespreken we jouw vraagstuk!

Paul Hachmang

Paul Hachmang is a Back-end Developer from Roelofarendsveen (The Netherlands) and co-founder of H&O. His weapons of choice include PHP, MySQL, HTML, Javascript, ExpressionEngine, Magento and a good cup of coffee. Contact Paul Hachmang

Comments
  • Alex

    (mar 21)
    Reply to this comment

    Ik constateer hier echter enkele problemen. Wanneer ik een image plaats werkt het perfect maar wanneer ik een thumbnail plaats wordt die niet geladen. Werkt dit bij jou wel? Aangezien ik in je voorbeeldscreen ook zie dat je bij beide (image en thumbnail) hetzelfde plaatje hebt gebruikt.

    • Paul Hachmang

      (mar 21)
      Reply to this comment

      Hi Alex, I uploaded two different images (they differ in size). I use the thumbnail for my navigation, and the bigger Image for a custom block on my frontpage. So yes, it works for me. Have you tried both:

      echo $this->drawItem($child0true,'thumbnail'); 

      and

      echo $this->drawItem($child0true,'image'); 
  • Mike

    (mar 23)
    Reply to this comment

    Hi Paul, I’ve just tried to implement this - the dropdown is built no problem, but for some reason, the images do not display. I’ve followed the tutorial, double checked and checked again but still can’t make this work.

    Are there any settings on the backend I may have missed?

    Many thanks!

    • Paul Hachmang

      (mar 24)
      Reply to this comment

      Sorry guys, I totally forgot some steps. Steps 4 and 6 are new for you both, that should solve your problems. Let me know if everything works out!

  • Mike

    (mar 24)
    Reply to this comment

    Thanks Paul - this works great, you’re awesome!

    Thanks again,
    Mike

  • Dirk

    (apr 18)
    Reply to this comment

    Hi, great tutorial. But i’m stuck at step five, i can’t seem to find the public function drawItem.

    I’m using magento version 1.4.2.0.

    Any ideas how to solve this ?

    Thanks in advance

    • Paul Hachmang

      (apr 18)
      Reply to this comment

      Hi Dirk,

      In Magento 1.4.2.0, things are indeed a little different. You’ll don’t have to take step five and six, but instead you’ll have to give the function drawItem an extra parameter $rendermode. I’m not really in the position to test, but I think things should work.

      • Dirk

        (apr 19)
        Reply to this comment

        In which script should i add the extra parameter ?

        So i dont take steps 5 and 6 , but where do i add the extra parameter ( $rendermode )

        Thnx alot

  • Joakim

    (apr 26)
    Reply to this comment

    Did you get this working in Magento 1.5 cause I’m stuck? I also can’t figure out what to do with the $rendermode function.

    • Erwin Otten

      (apr 27)
      Reply to this comment

      Joakim, this originally is a Magento 1.5 solution so it should work for you.

      • Joakim

        (apr 29)
        Reply to this comment

        ahh. Now I figured out the problem. My goal has been to change the labels with pictures and not the sub categories, I don’t have any sub categories and that’s why the images didn’t appear. Do you know how would go about to achieve this? I guess it’s a minor tweak of your code but I can’t really grasp what it should be.
        J

  • Ting

    (apr 28)
    Reply to this comment

    Hi,Can this work in 1.4.1.1.
    I did this step by step but error happen,any solutions……

  • Nelson

    (mei 17)
    Reply to this comment

    Thanks for sharing - it works great!

    Question - how I remove the original category (parent ID) from showing in the top bar? Now I have 2 - the original without pictures, and the new one with. I tried to disable in the Admin Panel by using the “Include in Navigation Menu” but that seemed to disable the new one’s function altogether.

    • Erwin Otten

      (mei 17)
      Reply to this comment

      Hi Nelson, I’m happy it works for you.

      What we did is that we removed the <?php echo $_menu ?> and build the complete navigation ourselves. In our case it there were just a few items (as you can see in the screenshot), so this wasn’t a problem. Let me know if you find a better way!

      Regards,
      Erwin

  • elvis

    (jul 19)
    Reply to this comment

    hi
    i have problem with step 6… i dont know what i must doing… please write easier :)
    ps. sorry for my english
    thanks, elvis

    • Paul Hachmang

      (jul 19)
      Reply to this comment

      Hi Elvis,

      You see the , $rendermode appended in the example? If you look at your own code it isn’t there, you have to just add it there. Does that make sense?

  • elvis

    (jul 19)
    Reply to this comment

    no quite… not for my :/
    Can you give me I’m exactly to paste and where?

  • elvis

    (jul 19)
    Reply to this comment

    you cant help me? :/

    • Paul Hachmang

      (jul 19)
      Reply to this comment

      In the file Navgation.php, do a search for _renderCategoryMenuItemHtml. You should see something like:

      protected function _renderCategoryMenuItemHtml($category, $level = 0, $isLast = false, $isFirst = false, $isOutermost = false, $outermostItemClass = ‘’, $childrenWrapClass = ‘’, $noEventAttributes = false)

      Replace this with:

      protected function _renderCategoryMenuItemHtml($category, $level = 0, $isLast = false, $isFirst = false, $isOutermost = false, $outermostItemClass = ‘’, $childrenWrapClass = ‘’, $noEventAttributes = false, $rendermode)

      • elvis

        (jul 19)
        Reply to this comment

        ok, now is excelent :) thanks

        but if i want this top menu: http://sklep.pierrot.pl/  ?

        • Paul Hachmang

          (jul 19)
          Reply to this comment

          You’ll have to edit the /frontend/base/default/template/catalog/navigation/top.phtml file. What happens if you use the default of that file?

  • MisteriE

    (jul 29)
    Reply to this comment

    Hi guys, I’m trying this tuto but it doesn’t work for me:
    Fatal error: Class ‘Mage_Catalog_Block_Navigation’ not found in /app/code/local/Mage/Catalog/Block/Navigation.php on line 35

    I don’t understant, my files is :

    class Raptor_Explodedmenu_Block_Navigation extends Mage_Catalog_Block_Navigation
    {
      
    public function drawItem($category$level 0$last false$rendermode)
          
    {
              
    return $this->_renderCategoryMenuItemHtml($category$level$lastnullnullnullnullnull$rendermode);
          


    (...) 

    Thanks you for you help

    • Paul Hachmang

      (jul 29)
      Reply to this comment

      Before you modified the Raptor_Explodedmenu_Block_Navigation file, did everything work like expected? Is it maybe that there is a syntax error in your file?

  • eddie

    (aug 11)
    Reply to this comment

    hi paul,

    great tut. thank you. i have problems with the css of the ul and li. can you post the css yours?
    Thanks in regards

  • Derek

    (aug 12)
    Reply to this comment

    Hi,

    how can i put the link of the category on the thumbnail?

    • Derek

      (aug 12)
      Reply to this comment

      Ok, I solved it by myself. So in Navigation.php


      replace

      if($rendermode == 'image' && $this->getImageUrl($category)){
                 $html[] 
      '<img src="'.$this->getImageUrl($category).'" />';
                
      }else if($rendermode == 'thumbnail' && $this->getThumbnailUrl($category)){
                 $html[] 
      '<img src="'.$this->getThumbnailUrl($category).'" />';
                

      with

      if($rendermode == 'image' && $this->getImageUrl($category)){
                 $html[] 
      '<img src="'.$this->getImageUrl($category).'" />';
                
      }else if($rendermode == 'thumbnail' && $this->getThumbnailUrl($category)){
                 $html[] 
      '<a href="'.$this->getCategoryUrl($category).'"><img src="'.$this->getThumbnailUrl($category).'" /></a>';
                

      greetz

      • Derek

        (aug 12)
        Reply to this comment

        i mean

        if($rendermode == 'image' && $this->getImageUrl($category)){
                   $html[] 
        '<img src="'.$this->getImageUrl($category).'" />';
                  
        }else if($rendermode == 'thumbnail' && $this->getThumbnailUrl($category)){
                   $html[] 
        '<a href="'.$this->getCategoryUrl($category).'"><img src="'.$this->getThumbnailUrl($category).'" /></a>';
                  
        • Derek

          (aug 12)
          Reply to this comment

          well it does not work properly with cut and paste. just put this tag before the img src of the thumbnail and close it.

          <a href="'.$this->getCategoryUrl($category).'"
  • Matthew Pont

    (aug 12)
    Reply to this comment

    I had to do a ‘Mega Menu’ in my first ever Magento site (loving Magento BTW) and Google sent me here.

    Wow! Thanks so much for a great tutorial, held my hand the whole way and I just need to style my menu up and i’ll be there.  Awesome.

  • Alexis A. Banaag Jr.

    (sep 22)
    Reply to this comment

    I’m following this one but can’t seem to find what function should be added on navigation.php I’m stuck at step three. Can you help me with this one? thanks

  • Alexis A. Banaag Jr.

    (sep 22)
    Reply to this comment

    Opps. never mind. i got it to work now. thanks. Great post!

  • Magento ontwerp

    (sep 28)
    Reply to this comment

    Thanks for giving this steps…By following this we can do this properly…I like this sort of post…

  • Steven Sullivan

    (okt 18)
    Reply to this comment

    I am using Magento 1.6. When i do step 2, “Your Parent” is not added to my navigation (nothing is added). when i do step 3, the site displays this message

    Parse error: syntax error, unexpected T_PROTECTED in /home/jgmods13/public_html/app/code/local/Mage/Catalog/Block/Navigation.php on line 63

    Does this work for 1.6? if so, im not sure what i’m doing wrong. thank you!

  • Magento Developer

    (okt 24)
    Reply to this comment

    Great Post!

  • Rahul

    (okt 29)
    Reply to this comment

    Thanks.i was doing using loop but your solution is perfect.

  • Gabriel

    (nov 22)
    Reply to this comment

    Thanks for all these tips but it dont work for me….
    I’m using Magento 1.6 and i have still text instead thumbnails when i put the number of my category in top.phtml…
    (if i dont put the ID of the category , i have a write line).
    If someone have any idea… Thanks a lot.

  • Gabriel

    (nov 23)
    Reply to this comment

    Now its working but just one parent category is displaying ( i have 4 parents category) how to display all the parents category and have the thumbnails on the child category instead of just one ?

  • Magento C

    (nov 24)
    Reply to this comment

    I agree with you

  • Polina

    (feb 08)
    Reply to this comment

    I followed the precise instructions and it did not work at ALL. On top of that, completely broke access to editing my products on the backend. Whenever I try to edit the product all i receive is an error message: “Fatal error: Call to a member function setAttribute() on a non-object in   app/code/core/Mage/Eav/Model/Entity/Attribute/Abstract.php on line 374

  • Polina

    (feb 08)
    Reply to this comment

    I searched around Magento forums for resolving the issue. Looks like most other people had the “fatal error” issue the same as mine after upgrading to a new Magento version. But my error occured after following this tutorial. I cannot edit any products on my backend. Please help!

    • Erwin Otten

      (feb 08)
      Reply to this comment

      Hi Polina. If you just remove the files you created, everything will be back to normal:
      1) frontend/yourpackage/yourtheme/template/catalog/navigation/top.phtml
      2) app/code/local/Mage/Catalog/Block/navigation.php
      3) app/code/local/Mage/Catalog/Model/Category.php
      If you’re still having problems, it most definitely is your upgrade. Be aware that upgrading Magento is a challeging task and should always be done by a professional. The best way to check if your problems are indeed a result of a bad upgrade, try to configure your shop to use the default theme (system > configuration > design, choose ‘default’ as package and ‘default’ for each theme) and remove caches / refresh indexes. If you are indeed still experiencing problems, you should probably restore your files, as well as your database, from a backup.

  • Polina

    (feb 08)
    Reply to this comment

    I did not upgrade my system, it appears something transpired while following the steps for enabling picture functionality in navigation for categories. The other forums regarding this error did not help because my issue is not due to upgrade. I have 1.4.1.1 system. I am afraid I have to re-install the entire Magento now :( I have worked for months on customizing everything and now this. I tried retracing all the steps back to its original condition but cant figure out the root cause, something was changed.

  • Prasanna

    (feb 13)
    Reply to this comment

    Hi Paul, will this steps work out if I wanna do like this in vertical navigation on the left sidebar? Or are there any modifications in the steps? Please advice.

  • Niks

    (feb 16)
    Reply to this comment

    If i want to display images in right sidebar in magento so what is the next step i should follow.Please give me result.

  • Eunyoung Lee

    (mar 13)
    Reply to this comment

    Thanks…

  • A

    (mar 18)
    Reply to this comment

    Hi Erwin .. this is great and exactly what I’ve been looking for.
    I have Magento Enterprise installation and running multi-stores.  I followed all steps and do see the top menu with my text.  Under that I dont see any further image or text but just a blank.

    Do I need to do anything different for enterprise - i think should have been same?

    Appreciate you getting back to me.
    Thanks ..

    • A

      (mar 18)
      Reply to this comment

      Hi - just an update.  I was able to make this work.  Category images are displaying well.
      However, I it only shows Menu Navigation Depth of 1 drop down. 

      How can I show multiple child category drop downs?

      Thanks .. A

      • Erwin Otten

        (mar 20)
        Reply to this comment

        Hi A, great you’ve figured it out so far! You probably have to configure ‘maximal depth’ in your admin panel: http://www.h-o.nl/blog/comic_magento_categories_not_showing/

  • Rabe'e AbdelWahab

    (apr 23)
    Reply to this comment

    thank you very much, working on Magento 1.6.2 , with more tweaks on Navigation.php as the menu in the template file is now called with one main function renderCategoriesMenuHtml()

    • tim

      (apr 24)
      Reply to this comment

      works fine but when image is available for navigation category it doesn’t show the subcategories anymore. When you remove category image (image or thumbnail) the subs are beeing displayed again. I tried with flat catalog on/off, rebuidling indexes, setting max dept in admin, all cats set to anchor etc… Anybody same issue?

    • omar

      (dec 22)
      Reply to this comment

      Waheb,

      How did you do it? I think we have the same issue. Do you have your demo set up?

      Thank you
      Omar

  • tuba

    (mei 03)
    Reply to this comment

    wow, cool man! I was looking for getThumbnail() function to display category thumbnail, but got a very good code here. Thanks!

  • kathirvel

    (jun 15)
    Reply to this comment

    Nice tutorial paul, i spend this for two days ,thanks paul, good

    • Paul Hachmang

      (jun 15)
      Reply to this comment

      Thanks Kathirvel, you’re welcome!

      • kathirvel

        (jun 15)
        Reply to this comment

        hi paul ,i it work fine,i need your help, how can i show the sub category images of all the parent category, can u help please ,i will wait for your result ,pls reply me

  • kathirvel

    (jun 18)
    Reply to this comment

    go the path app/core/code/Mage/catalog/navigation.php

    find the code as below
    $html[] = ‘[url=”’.$this->getCategoryUrl($category).’”]’;
          $html[] = ‘<span>’ .$this->escapeHtml($category->getName()) . ‘</span>’;
      $html[] = ‘[/url]’;


    then u can add the code for img src on above like

    $html[] = ‘’.$this->getThumbnailUrl($category).’;
    $html[] = ‘[url=”’.$this->getCategoryUrl($category).’”]’;
          $html[] = ‘<span>’ .$this->escapeHtml($category->getName()) . ‘</span>’;
      $html[] = ‘[/url]’;


    then in the same file below u can add the below function

      public function getImageUrl($category)
        {
          return Mage::getModel(‘catalog/category’)->load($category->getId())->getImageUrl();
        }
      public function getThumbnailUrl($category)
        {
          return Mage::getModel(‘catalog/category’)->load($category->getId())->getThumbnailUrl();
        }

    now save it,ur problem solve,

    goto the homepage ,when we mouseover the topmenu ,it list the subcategories with images, and also parent categories images also shown , now u want to hide the parent categories images , u must hide the class level0 nav-1 level-top first parent ,u can see the class as inspecting,

    thank u,

  • vishves

    (jun 26)
    Reply to this comment

    Hey its not working in magento 1.7 & 1.6.1
    i have stable version ..
    please help me to do this i need your help guys

  • kathirvel

    (jun 28)
    Reply to this comment

    hi vishves,
    can u follow this steps , when you mouseover the main category ,it shows the subcategory and its images ,
    open the file app/code/core/mage/catalog/navigation.php ,find the below line in the file

    $htmlLi '<li';
            foreach (
    $attributes as $attrName => $attrValue{
                $htmlLi 
    .= ' ' $attrName '="' str_replace('"''\"'$attrValue) . '"';
            
    }  
            $htmlLi 
    .= '>';
            
    $html[] $htmlLi;
     
    $html[] '<a href="'.$this->getCategoryUrl($category).'">';
            
    $html[] '<span>' .$this->escapeHtml($category->getName()) . '</span>';        
      
    $html[] '</a>';
    and 
    replace the above line as below 
    $htmlLi 
    '<li';
            foreach (
    $attributes as $attrName => $attrValue{
                $htmlLi 
    .= ' ' $attrName '="' str_replace('"''\"'$attrValue) . '"';
            
    }
      
            $htmlLi 
    .= '>';
            
    $html[] $htmlLi;
      if(!
    $level==0)
      

      $html[] 
    '<img src="'.$this->getThumbnailUrl($category).'" width="100" height="100" />';
      
    }    
         $html[] 
    '<a href="'.$this->getCategoryUrl($category).'">';
            
    $html[] '<span>' .$this->escapeHtml($category->getName()) . '</span>';        
      
    $html[] '</a>';

    and 
    then add the below two function in the same file  as last,
     public function 
    getImageUrl($category)
          
    {
              
    return Mage::getModel('catalog/category')->load($category->getId())->getImageUrl();
          
    }
       
    public function getThumbnailUrl($category)
          
    {
              
    return Mage::getModel('catalog/category')->load($category->getId())->getThumbnailUrl();
          
    }

    and then open the app/code/core/mage/catalog/model/category.php
    write the 
    function below as on getImageUrl()
    public function 
    getThumbnailUrl()
          
    {
              $url 
    false;
              if (
    $image $this->getThumbnail()) {
                  $url 
    Mage::getBaseUrl('media').'catalog/category/'.$image;
              
    }
              
    return $url;
          

    then now check it and refresh the cache management ,i hope its heps you ,
     

     

  • dynamo

    (jun 28)
    Reply to this comment

    did not work in 1.7.1, anything to do to make it work?
    when is this article written?

  • zerocool

    (aug 07)
    Reply to this comment

    does not work in version 1.7.1

  • Nasir Pathan

    (sep 04)
    Reply to this comment

    i m new fresher in magento developement how i can hyperlink the image in this model
    please tell me solution

  • Nasir Pathan

    (sep 04)
    Reply to this comment

    Nasir Pathan
    hi paul
    please , tell me how to change the category in horizental format

  • Wiinter

    (sep 05)
    Reply to this comment

    No go on 1.7, eh?  Anyone have any alternatives?

  • Savoye

    (sep 12)
    Reply to this comment

    Anyone know how to do it with Magento 1.7 ? The file Topmenu.php create the structure with $child but how to call function getThumbnail() ?

  • Mark

    (sep 21)
    Reply to this comment

    I’m another one that is searching for a solution to this in v1.7+, Main menu has moved to tempate/page/html/topmenu.phtml and Navigation.php appears to have been rewritten as well. I require category images to appear in the subcategory dropdown menu only, but so far no joy. Any help or pointers greatly appreciated.

  • Kevin

    (okt 15)
    Reply to this comment

    Thanks alot! This works great in 1.7.0.2

  • Peter

    (nov 03)
    Reply to this comment

    Made step 1 and 2, but ‘Your parent’ in the navigation does not show?

  • Mike

    (nov 23)
    Reply to this comment

    Hi
    I created folder template/catalog/navigation/
    Where is top.phtml
    Thx

  • Rameez

    (dec 05)
    Reply to this comment

    Hi, I am using Magento 1.7.x.x. IT didn’t work for me.
    I have used 80x80 as my thumbnail and bigger image for block.
    I tried all those steps and double checked it twice.
    Good thing is that there is no error showing on the page. But I can’t get the images on it. Also ‘Your Parent’ is also not showing on the page as well.
    Thanks for your help in advance.

  • Cesar Schrega

    (dec 16)
    Reply to this comment

    Thanks, worked perfectly in 1.7.0.2.

    I’m new to magento and now trying to understand how do i get to have the top level (“Your Parent Category”) in different languages. Any clue?

  • Omar

    (dec 22)
    Reply to this comment

    Paul,
    I am glad to see so many people got this working… I am on my third install and I think that I have gone as far as I can go on these steps…. I am using 1.6.2; i show no errors. It should be working. It looks like Waheb has the answer…

    “Rabe’e AbdelWahab(apr 23) Reply to this comment
    thank you very much, working on Magento 1.6.2 , with more tweaks on Navigation.php as the menu in the template file is now called with one main function renderCategoriesMenuHtml()...”

    Also, does anyone have a DEMO to view..

    THANKS ALOT!
    Omar
    LEDcityUSA.com

    • Rabe'e AbdelWahab

      (dec 28)
      Reply to this comment

      Not a problem, but unfortunately i dont have any demo.

  • omar

    (jan 01)
    Reply to this comment

    ANY1?

  • Asifraza

    (mar 28)
    Reply to this comment

    i falow the above all step in magento 1.7 but still subcatagry image not display please give me the hint what i do now?

Reageren

Contact

Bel mij terug

Vul uw telefoonnummer in en we bellen u zo spoedig mogelijk terug.

Contactgegevens

H&O
Veenderveld 20
2371 TV
Roelofarendsveen
info@h-o.nl
www.h-o.nl
071 744 0084
KvK Rijnland nr. 28119089
BTW nr. NL818554071B01

Nieuwe projecten

Wilt u weten wat H&O kan betekenen voor uw Magento project? Stuur ons een mailtje:

Paul Hachmang

p.hachmang@h-o.nl

Erwin Otten

e.otten@h-o.nl

Contactformulier