Replace Links with Images in a Magento 1.4 Menu

Here’s how to replace the text links with images in the top level of your Magento menu (tested on Magento 1.4.1.1)…

First, make a copy the following file… app/code/core/Mage/Catalog/Block/Navigation.php

Place the file in folder… app/code/local/Mage/Catalog/Block/ – if this folder doesn’t exist, create it (This process creates a version of the Navigation.php which will over-ride the core file when you edit it. If everything goes wrong, you can delete this file and Magento will revert back to using the default core file).

Now add the following code to the end your new Navigation.php file ensuring it is inside the last closing bracket – } …

// Replace top-level menu links with images
public function drawImgItem($category, $level=0, $last=false){
$html = ”;
$categoryName = ”;
if (!$category->getIsActive()) {
return $html;
}
$children = $category->getChildren();
$hasChildren = $children && $children->count();
$html.= ‘<li’;
if ($hasChildren) {
$html.= ‘ onmouseover=”toggleMenu(this,1)” onmouseout=”toggleMenu(this,0)”‘;
}
$html.= ‘>’;
$categoryName    = $category->getName();
$categoryName = htmlentities($categoryName, ENT_NOQUOTES, ‘utf-8’);
$categoryName = preg_replace(‘#&([A-za-z])(?:uml|circ|tilde|acute|grave|cedil|ring);#’, ‘1’, $categoryName);
$categoryName = preg_replace(‘#&([A-za-z]{2})(?:lig);#’, ‘1’, $categoryName);
$categoryName = preg_replace(‘#&[^;]+;#’, ”, $categoryName);

$url = Mage::getDesign()->getSkinUrl(‘images/’.strtolower(str_replace(” “,”_”,$categoryName)).’.png’); // path to images folder – name images same as category url key
/* if ($this->isCategoryActive($category)) {
$url = Mage::getDesign()->getSkinUrl(‘images/’.strtolower(str_replace(” “,”_”,$categoryName)).active.’.png’); // path to images folder – loads this image when page is active name images same as category url key + ‘active’ ie. categoryurlactive.png
} */
$html.= ‘<a href=”‘.$this->getCategoryUrl($category).'”><span><img src=”‘.$url.'” alt=” ‘.$this->htmlEscape($category->getName()).'”></span></a>’;
if ($hasChildren){
$j = 0;
$htmlChildren = ”;
foreach ($children as $child) {
if ($child->getIsActive()) {
$htmlChildren.= $this->drawItem($child, $level+1, ++$j >= $cnt);
}
}
if (!empty($htmlChildren)) {
$html.= ‘<ul>’
.$htmlChildren
.'</ul>’;
}
}
$html.= ‘</li>’;
return $html;
}

Next we must edit our template to call the new function we have added to the core. To do this open the file… design/frontend/default/your template/template/catalog/navigation/top.phtml (if your template does not contain this file – create it manually).

Now simply replace the code in the top.phtml file with the following…

<div>
<ul id=”nav”>
<?php foreach ($this->getStoreCategories() as $_category): ?>
<?php echo $this->drawImgItem($_category) ?>
<?php endforeach ?>
</ul>
</div>

And finally add the images you wish to use in your menu to the images folder in your skin… skin/frontend/default/your skin/images/ and rename the files so the name of the file is the same as your category url key in the Magento backend. So, if you have a category called shoes, you would name the image shoes.png

Modifications

To change the source folder of your images or to change the file extensions you use, modify this line…

$url = Mage::getDesign()->getSkinUrl(‘images/’.strtolower(str_replace(” “,”_”,$categoryName)).’.png’);

You can change .png to .jpg or .gif as required, for example, or change the filepath to whichever folder you put you images in.

If you wish to change the image which appears when you are on an active page, uncomment the line…

if ($this->isCategoryActive($category)) {
$url = Mage::getDesign()->getSkinUrl(‘images/’.strtolower(str_replace(” “,”_”,$categoryName)).active.’.png’);
}

Once you have done this, rename the files you wish to use for active pages to include the word active. For example, your shoes.png would be called shoesactive.png for the active menu item. Remember to make any changes to the filepath or file extension, which you made to the main images above, to this line of code too.