March 11, 2011
By Erwin Otten

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!

March 11, 2011
By Erwin Otten

Looking for a Magento webshop specialist?

We'd love to get in touch with you. Let's start a Magento webshop project?