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
Alex
Paul Hachmang
Mike
Paul Hachmang
Mike
Dirk
Paul Hachmang
Dirk
Paul hachmang
Joakim
Erwin Otten
Joakim
Ting
Paul Hachmang
Nelson
Erwin Otten
elvis
Paul Hachmang
elvis
elvis
Paul Hachmang
elvis
Paul Hachmang
MisteriE
Paul Hachmang
eddie
Derek
Derek
Derek
Derek
Erwin Otten
Matthew Pont
Erwin Otten
Alexis A. Banaag Jr.
Alexis A. Banaag Jr.
Magento ontwerp
Steven Sullivan
Magento Developer
Rahul
Gabriel
Gabriel
Gabriel
Magento C
Polina
Polina
Erwin Otten
Polina
Prasanna
Niks
Eunyoung Lee
A
A
Erwin Otten
Rabe'e AbdelWahab
tim
omar
tuba
kathirvel
Paul Hachmang
kathirvel
kathirvel
vishves
kathirvel
dynamo
zerocool
Nasir Pathan
Nasir Pathan
Wiinter
Savoye
Mark
Kevin
Peter
Mike
Rameez
Cesar Schrega
Omar
Rabe'e AbdelWahab
omar
Asifraza