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:
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).
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.
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):
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).
Still in Navgation.php, look for the public function drawItem. Replace it with:
Look for the function _renderCategoryMenuItemHtml. Add an extra parameter to the function: $rendermode, so it looks like:
Look for $html = $htmlLi; in Navigation.php. Past the following right below it:
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!