My Cart

You have no items in your shopping cart. Buy products from our webshop

  • Home /
  • Blog /
  • Using category images in your magento navigation

    • 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!

    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($child, 0, true,'thumbnail'); 

        and

        echo $this->drawItem($child, 0, true,'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)

    • 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, $last, null, null, null, null, null, $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 ..

    • Ultram

      (mar 26)
      Reply to this comment

      Viagra en Espana como comprar viagra uno de cincuenta http://viagrafarmaciaes.com/#1229 venta viagra MobileSpyBest.com spying software com http://mobilespybest.com/ 10 signs of a cheating spouse ValDiazepam pronunciation generic valium http://valdiazepam.com/ no rx valium buy Viagra Generique a vendre viagra generique http://viagrapharmaciefrance.com/#6306 comprar viagra pas cher <a >Viagra Generique</a> acheter du viagra generique

    • 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?

    • 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!

    Comment and contribute

    Topics
    Recent Comments

    • LiQcrX,

      View comment 18 mei by pay day loans online

    • People in the whole world order the already written essays or custom essays at the writing service reffering to this post. The students heard about the essay writing from the writing services.

      View comment 17 mei by Carey26Park

    • When you buy essay papers at professional academic papers writing firms, you can be sure that you are completely safe.

      View comment 17 mei by MelindaPATTERSON28

    • is the script updated for 1.6? anyone tried?

      View comment 16 mei by Magento UK

    • i put this code in product description view.phtml file 87 num line and it works very nice

      View comment 16 mei by Upendra jetavat

    • Do not want to be frustrated anymore? Have complex research papers to compose? Don’t realize even how to begin? Do not worry so much and just buy cheap custom term paper!

      View comment 14 mei by VALERIAHenderson
    Latest blog posts
    Op zoek naar een professionele en ervaren Magento specialist?
    Één partner voor ontwerp, techniek en onderhoud? Bekijk onze onderhoudsabonnementen.

    H&O
    Veenderveld 76
    2371 TW
    Roelofarendsveen
    info@h-o.nl
    www.h-o.nl
    071 744 0084