Replace Links with Images in a Magento 1.4 Menu

Written by Adrian Hart

Topics: Magento

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.

11 Comments Comments For This Post I'd Love to Hear Yours!

  1. PhatGrrl says:

    HI

    I’ve been looking everywhere to find the answer to how you can change the ‘add to wishlist’ and ‘add to compare’ links on product pages to images with links. So instead of clicking the text link to go to the wishlist, you click an image. Is there any way to do this, I can’t find an answer anywhere.

    I hope you don’t mind me leaving this in your comment section. Desperation calls…

    • Sid Vel says:

      @ PhatGrrl

      Look within catalog/product/view/addto.phtml

      <a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist">
      <?php echo $this->__('Add to Wishlist') ?>
      </a>
      

      Just replace

      <?php echo $this->__('Add to Wishlist') ?>

      with your image link.

  2. PhatGrrl says:

    Thank you very much for taking the time to answer.

  3. Lacey says:

    Great post! I implemented this and it is exactly what I needed!

    I did have a few errors I had to work through to get it working. I had to comment out the two lines of $html = ”; (one near the beginning and one near the end) because it showed as unknown objects in my menu.

    Also, and this could just be an issue with the ftp editor I was using, but I cut and pasted the code and found that some of the quotes need to be retyped. For some reason the site read some of the quotes as foreign objects.

    Thanks!!

    • Sid Vel says:

      @ Lacey – Could you share the URL of your website?

      • Lacey says:

        Hi Sid! I will post my website as soon as I launch it… almost there! :o) I have a quick question though- when I enabled my cache, when I check out the site switches over to SSL, and that I get that popup saying something is insecure. I checked it out and the urls to the menu images are not switching to https. Is there any snippet of code you know that can call https to the images when required? Thanks!! Lacey

  4. vitupea says:

    how the fuck is a person supposed to copy this code when all the “”"”-s and ‘-s are fucked up

  5. azo says:

    I need help please, the images are not showing, i still have the text link on the menu and when i hover over the submenu doesnt pop up anymore…can anyon help me please?

  6. Paul says:

    Great explanation there. Could you help with this though? – i want to be able have a text menu like normal but then when someone hovers it gets underlined but with a scruffy line image.

    Then once on the page for that image to stay under that.

    Kind Regards

    Paul

Leave a Comment Here's Your Chance to Be Heard!