Support: 071 744 0084
Contact
071 744 0084
info@h-o.nl
Jos Verhaar - Magento support
Erwin Otten - New business
Paul Hachmang - Techniek

Using category images in your magento navigation

By Erwin Otten 11 maart 2011 Laat een reactie achter Ga naar reacties

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!

Alex

Ik constateer hier echter enkele problemen. Wanneer ik een image plaats werkt het perfect maar wanneer ik een thumbnail plaats wordt die niet geladen. Werkt dit bij jou wel? Aangezien ik in je voorbeeldscreen ook zie dat je bij beide (image en thumbnail) hetzelfde plaatje hebt gebruikt.

Paul Hachmang

Hi Alex, I uploaded two different images (they differ in size). I use the thumbnail for my navigation, and the bigger Image for a custom block on my frontpage. So yes, it works for me. Have you tried both:

[code]echo $this->drawItem($child, 0, true,'thumbnail');[/code]
and
[code]echo $this->drawItem($child, 0, true,'image');[/code]

Mike

Hi Paul, I've just tried to implement this - the dropdown is built no problem, but for some reason, the images do not display. I've followed the tutorial, double checked and checked again but still can't make this work.

Are there any settings on the backend I may have missed?

Many thanks!

Paul Hachmang

Sorry guys, I totally forgot some steps. Steps 4 and 6 are new for you both, that should solve your problems. Let me know if everything works out!

Mike

Thanks Paul - this works great, you're awesome!

Thanks again,
Mike

Dirk

Hi, great tutorial. But i'm stuck at step five, i can't seem to find the public function drawItem.

I'm using magento version 1.4.2.0.

Any ideas how to solve this ?

Thanks in advance

Paul hachmang

You'll have to give the extra parameter to the function drawItem, which you can find in Navigation.php

Dirk

In which script should i add the extra parameter ?

So i dont take steps 5 and 6 , but where do i add the extra parameter ( $rendermode )

Thnx alot

Paul Hachmang

Hi Dirk,

In Magento 1.4.2.0, things are indeed a little different. You'll don't have to take step five and six, but instead you'll have to give the function drawItem an extra parameter $rendermode. I'm not really in the position to test, but I think things should work.

Joakim

Did you get this working in Magento 1.5 cause I'm stuck? I also can't figure out what to do with the $rendermode function.

Joakim

ahh. Now I figured out the problem. My goal has been to change the labels with pictures and not the sub categories, I don't have any sub categories and that's why the images didn't appear. Do you know how would go about to achieve this? I guess it's a minor tweak of your code but I can't really grasp what it should be.
J

Erwin Otten

Joakim, this originally is a Magento 1.5 solution so it should work for you.

Ting

Hi,Can this work in 1.4.1.1.
I did this step by step but error happen,any solutions……

Paul Hachmang

Hi Ting. Have you read my comments I wrote to Dirk? You'll have to do things a little different in Magento 1.4.x.

Nelson

Thanks for sharing - it works great!

Question - how I remove the original category (parent ID) from showing in the top bar? Now I have 2 - the original without pictures, and the new one with. I tried to disable in the Admin Panel by using the "Include in Navigation Menu" but that seemed to disable the new one's function altogether.

Erwin Otten

Hi Nelson, I'm happy it works for you.

What we did is that we removed the &lt;?php echo $_menu ?&gt; and build the complete navigation ourselves. In our case it there were just a few items (as you can see in the screenshot), so this wasn't a problem. Let me know if you find a better way!

Regards,
Erwin

elvis

hi
i have problem with step 6... i dont know what i must doing... please write easier :)
ps. sorry for my english
thanks, elvis

Paul Hachmang

Hi Elvis,

You see the <code>, $rendermode</code> appended in the example? If you look at your own code it isn't there, you have to just add it there. Does that make sense?

elvis

no quite... not for my :/
Can you give me I'm exactly to paste and where?

elvis

you cant help me? :/

Paul Hachmang

You'll have to edit the <code>/frontend/base/default/template/catalog/navigation/top.phtml</code> file. What happens if you use the default of that file?

elvis

ok, now is excelent :) thanks

but if i want this top menu: http://sklep.pierrot.pl/ ?

Paul Hachmang

In the file Navgation.php, do a search for _renderCategoryMenuItemHtml. You should see something like:

<code>protected function _renderCategoryMenuItemHtml($category, $level = 0, $isLast = false, $isFirst = false, $isOutermost = false, $outermostItemClass = '', $childrenWrapClass = '', $noEventAttributes = false)</code>

Replace this with:

<code>protected function _renderCategoryMenuItemHtml($category, $level = 0, $isLast = false, $isFirst = false, $isOutermost = false, $outermostItemClass = '', $childrenWrapClass = '', $noEventAttributes = false, $rendermode)</code>

MisteriE

Hi guys, I'm trying this tuto but it doesn't work for me:
Fatal error: Class 'Mage_Catalog_Block_Navigation' not found in /app/code/local/Mage/Catalog/Block/Navigation.php on line 35

I don't understant, my files is :
[code]
class Raptor_Explodedmenu_Block_Navigation extends Mage_Catalog_Block_Navigation
{
public function drawItem($category, $level = 0, $last = false, $rendermode)
{
return $this->_renderCategoryMenuItemHtml($category, $level, $last, null, null, null, null, null, $rendermode);
}

(...)
[/code]

Thanks you for you help

Paul Hachmang

Before you modified the Raptor_Explodedmenu_Block_Navigation file, did everything work like expected? Is it maybe that there is a syntax error in your file?

eddie

hi paul,

great tut. thank you. i have problems with the css of the ul and li. can you post the css yours?
Thanks in regards

Derek

Hi,

how can i put the link of the category on the thumbnail?

Erwin Otten

Thanks for sharing Derek, that is indeed the best way to do it.

Derek

well it does not work properly with cut and paste. just put this tag before the img src of the thumbnail and close it.

[code]
<a href="'.$this-&gt;getCategoryUrl($category).'">
[/code]

Derek

i mean

[code]
if($rendermode == 'image' && $this->getImageUrl($category)){
$html[] = '<img src="'.$this-&gt;getImageUrl($category).'" />';
}else if($rendermode == 'thumbnail' && $this->getThumbnailUrl($category)){
$html[] = '<a href="'.$this-&gt;getCategoryUrl($category).'"><img src="'.$this-&gt;getThumbnailUrl($category).'" /></a>';
}
[/code]

Derek

Ok, I solved it by myself. So in Navigation.php


replace
[code]
if($rendermode == 'image' && $this->getImageUrl($category)){
$html[] = '<img src="'.$this-&gt;getImageUrl($category).'" />';
}else if($rendermode == 'thumbnail' && $this->getThumbnailUrl($category)){
$html[] = '<img src="'.$this-&gt;getThumbnailUrl($category).'" />';
}
[/code]

with
[code]
if($rendermode == 'image' && $this->getImageUrl($category)){
$html[] = '<img src="'.$this-&gt;getImageUrl($category).'" />';
}else if($rendermode == 'thumbnail' && $this->getThumbnailUrl($category)){
$html[] = '<a href="'.$this-&gt;getCategoryUrl($category).'"><img src="'.$this-&gt;getThumbnailUrl($category).'" /></a>';
}
[/code]

greetz

Matthew Pont

I had to do a 'Mega Menu' in my first ever Magento site (loving Magento BTW) and Google sent me here.

Wow! Thanks so much for a great tutorial, held my hand the whole way and I just need to style my menu up and i'll be there. Awesome.

Erwin Otten

Thank you for the kind words Matthew, keeps us motivated!

Alexis A. Banaag Jr.

I'm following this one but can't seem to find what function should be added on navigation.php I'm stuck at step three. Can you help me with this one? thanks

Alexis A. Banaag Jr.

Opps. never mind. i got it to work now. thanks. Great post!

Magento ontwerp

Thanks for giving this steps...By following this we can do this properly...I like this sort of post...

Steven Sullivan

I am using Magento 1.6. When i do step 2, "Your Parent" is not added to my navigation (nothing is added). when i do step 3, the site displays this message

Parse error: syntax error, unexpected T_PROTECTED in /home/jgmods13/public_html/app/code/local/Mage/Catalog/Block/Navigation.php on line 63

Does this work for 1.6? if so, im not sure what i'm doing wrong. thank you!

Magento Developer

Great Post!

Rahul

Thanks.i was doing using loop but your solution is perfect.

Gabriel

Thanks for all these tips but it dont work for me....
I'm using Magento 1.6 and i have still text instead thumbnails when i put the number of my category in top.phtml...
(if i dont put the ID of the category , i have a write line).
If someone have any idea... Thanks a lot.

Gabriel

Now its working but just one parent category is displaying ( i have 4 parents category) how to display all the parents category and have the thumbnails on the child category instead of just one ?

Gabriel

LOL, im speaking alone. just copy the li on the TOP.phtml :)

Magento C

I agree with you

Polina

I followed the precise instructions and it did not work at ALL. On top of that, completely broke access to editing my products on the backend. Whenever I try to edit the product all i receive is an error message: "Fatal error: Call to a member function setAttribute() on a non-object in app/code/core/Mage/Eav/Model/Entity/Attribute/Abstract.php on line 374

Polina

I searched around Magento forums for resolving the issue. Looks like most other people had the "fatal error" issue the same as mine after upgrading to a new Magento version. But my error occured after following this tutorial. I cannot edit any products on my backend. Please help!

Erwin Otten

Hi Polina. If you just remove the files you created, everything will be back to normal:
1) frontend/yourpackage/yourtheme/template/catalog/navigation/top.phtml
2) app/code/local/Mage/Catalog/Block/navigation.php
3) app/code/local/Mage/Catalog/Model/Category.php
If you're still having problems, it most definitely is your upgrade. Be aware that upgrading Magento is a challeging task and should always be done by a professional. The best way to check if your problems are indeed a result of a bad upgrade, try to configure your shop to use the default theme (system > configuration > design, choose 'default' as package and 'default' for each theme) and remove caches / refresh indexes. If you are indeed still experiencing problems, you should probably restore your files, as well as your database, from a backup.

Polina

I did not upgrade my system, it appears something transpired while following the steps for enabling picture functionality in navigation for categories. The other forums regarding this error did not help because my issue is not due to upgrade. I have 1.4.1.1 system. I am afraid I have to re-install the entire Magento now :( I have worked for months on customizing everything and now this. I tried retracing all the steps back to its original condition but cant figure out the root cause, something was changed.

Prasanna

Hi Paul, will this steps work out if I wanna do like this in vertical navigation on the left sidebar? Or are there any modifications in the steps? Please advice.

Niks

If i want to display images in right sidebar in magento so what is the next step i should follow.Please give me result.

Eunyoung Lee

Thanks...

A

Hi Erwin .. this is great and exactly what I've been looking for.
I have Magento Enterprise installation and running multi-stores. I followed all steps and do see the top menu with my text. Under that I dont see any further image or text but just a blank.

Do I need to do anything different for enterprise - i think should have been same?

Appreciate you getting back to me.
Thanks ..

Erwin Otten

Hi A, great you've figured it out so far! You probably have to configure 'maximal depth' in your admin panel: http://www.h-o.nl/blog/comic_magento_categories_not_showing/

A

Hi - just an update. I was able to make this work. Category images are displaying well.
However, I it only shows Menu Navigation Depth of 1 drop down.

How can I show multiple child category drop downs?

Thanks .. A

Rabe'e AbdelWahab

thank you very much, working on Magento 1.6.2 , with more tweaks on Navigation.php as the menu in the template file is now called with one main function renderCategoriesMenuHtml()

omar

Waheb,

How did you do it? I think we have the same issue. Do you have your demo set up?

Thank you
Omar

tim

works fine but when image is available for navigation category it doesn't show the subcategories anymore. When you remove category image (image or thumbnail) the subs are beeing displayed again. I tried with flat catalog on/off, rebuidling indexes, setting max dept in admin, all cats set to anchor etc... Anybody same issue?

tuba

wow, cool man! I was looking for getThumbnail() function to display category thumbnail, but got a very good code here. Thanks!

kathirvel

Nice tutorial paul, i spend this for two days ,thanks paul, good

kathirvel

hi paul ,i it work fine,i need your help, how can i show the sub category images of all the parent category, can u help please ,i will wait for your result ,pls reply me

Paul Hachmang

Thanks Kathirvel, you're welcome!

kathirvel

go the path app/core/code/Mage/catalog/navigation.php

find the code as below
$html[] = '<a href="'.$this-&gt;getCategoryUrl($category).'">';
$html[] = '<span>' .$this->escapeHtml($category->getName()) . '</span>';
$html[] = '</a>';


then u can add the code for img src on above like

$html[] = '<img src="'.$this-&gt;getThumbnailUrl($category).'" width="100" height="100" />';
$html[] = '<a href="'.$this-&gt;getCategoryUrl($category).'">';
$html[] = '<span>' .$this->escapeHtml($category->getName()) . '</span>';
$html[] = '</a>';


then in the same file below u can add the below function

public function getImageUrl($category)
{
return Mage::getModel('catalog/category')->load($category->getId())->getImageUrl();
}
public function getThumbnailUrl($category)
{
return Mage::getModel('catalog/category')->load($category->getId())->getThumbnailUrl();
}

now save it,ur problem solve,

goto the homepage ,when we mouseover the topmenu ,it list the subcategories with images, and also parent categories images also shown , now u want to hide the parent categories images , u must hide the class level0 nav-1 level-top first parent ,u can see the class as inspecting,

thank u,

vishves

Hey its not working in magento 1.7 & 1.6.1
i have stable version ..
please help me to do this i need your help guys

kathirvel

hi vishves,
can u follow this steps , when you mouseover the main category ,it shows the subcategory and its images ,
open the file app/code/core/mage/catalog/navigation.php ,find the below line in the file
[code]

$htmlLi = '<li';
foreach ($attributes as $attrName => $attrValue) {
$htmlLi .= ' ' . $attrName . '="' . str_replace('"', '\"', $attrValue) . '"';
}
$htmlLi .= '>';
$html[] = $htmlLi;
$html[] = '<a href="'.$this-&gt;getCategoryUrl($category).'">';
$html[] = '<span>' .$this->escapeHtml($category->getName()) . '</span>';
$html[] = '</a>';
and replace the above line as below
$htmlLi = '<li';
foreach ($attributes as $attrName => $attrValue) {
$htmlLi .= ' ' . $attrName . '="' . str_replace('"', '\"', $attrValue) . '"';
}

$htmlLi .= '>';
$html[] = $htmlLi;
if(!$level==0)
{
$html[] = '<img src="'.$this-&gt;getThumbnailUrl($category).'" width="100" height="100" />';
}
$html[] = '<a href="'.$this-&gt;getCategoryUrl($category).'">';
$html[] = '<span>' .$this->escapeHtml($category->getName()) . '</span>';
$html[] = '</a>';

and then add the below two function in the same file as last,
public function getImageUrl($category)
{
return Mage::getModel('catalog/category')->load($category->getId())->getImageUrl();
}
public function getThumbnailUrl($category)
{
return Mage::getModel('catalog/category')->load($category->getId())->getThumbnailUrl();
}

and then open the app/code/core/mage/catalog/model/category.php
write the function below as on getImageUrl()
public function getThumbnailUrl()
{
$url = false;
if ($image = $this->getThumbnail()) {
$url = Mage::getBaseUrl('media').'catalog/category/'.$image;
}
return $url;
}

[/code]

then now check it and refresh the cache management ,i hope its heps you ,


dynamo

did not work in 1.7.1, anything to do to make it work?
when is this article written?

zerocool

does not work in version 1.7.1

Nasir Pathan

i m new fresher in magento developement how i can hyperlink the image in this model
please tell me solution

Nasir Pathan

Nasir Pathan
hi paul
please , tell me how to change the category in horizental format

Wiinter

No go on 1.7, eh? Anyone have any alternatives?

Savoye

Anyone know how to do it with Magento 1.7 ? The file Topmenu.php create the structure with $child but how to call function getThumbnail() ?

Mark

I'm another one that is searching for a solution to this in v1.7+, Main menu has moved to tempate/page/html/topmenu.phtml and Navigation.php appears to have been rewritten as well. I require category images to appear in the subcategory dropdown menu only, but so far no joy. Any help or pointers greatly appreciated.

Kevin

Thanks alot! This works great in 1.7.0.2

Peter

Made step 1 and 2, but 'Your parent' in the navigation does not show?

Mike

Hi
I created folder template/catalog/navigation/
Where is top.phtml
Thx

Rameez

Hi, I am using Magento 1.7.x.x. IT didn't work for me.
I have used 80x80 as my thumbnail and bigger image for block.
I tried all those steps and double checked it twice.
Good thing is that there is no error showing on the page. But I can't get the images on it. Also 'Your Parent' is also not showing on the page as well.
Thanks for your help in advance.

Cesar Schrega

Thanks, worked perfectly in 1.7.0.2.

I'm new to magento and now trying to understand how do i get to have the top level ("Your Parent Category") in different languages. Any clue?

Omar

Paul,
I am glad to see so many people got this working... I am on my third install and I think that I have gone as far as I can go on these steps.... I am using 1.6.2; i show no errors. It should be working. It looks like Waheb has the answer...

"Rabe'e AbdelWahab(apr 23) Reply to this comment
thank you very much, working on Magento 1.6.2 , with more tweaks on Navigation.php as the menu in the template file is now called with one main function renderCategoriesMenuHtml()..."

Also, does anyone have a DEMO to view..

THANKS ALOT!
Omar
LEDcityUSA.com

Rabe'e AbdelWahab

Not a problem, but unfortunately i dont have any demo.

omar

ANY1?

Asifraza

i falow the above all step in magento 1.7 but still subcatagry image not display please give me the hint what i do now?

Erwin Otten

Thanks for your contribution, Cyril :)

Cyril

In magento 1.7 i got solution with this :
1. in the Model file. (/app/code/core/Mage/Catalog/Model/Observer.php)
[code]
Function Name: _addCategoriesToMenu
$categoryData = array(
'name' => $category->getName(),
'id' => $nodeId,
'url' => Mage::helper('catalog/category')->getCategoryUrl($category),
'is_active' => $this->_isActiveMenuCategory($category),
// Add thumbnail
'thumbnail' => Mage::getModel('catalog/category')->load($category->getId())->getThumbnail()
);
[/code]
2. in the Html folder. (app/code/core/Mage/Page/Block/Html/Topmenu.php)
[code]
Function Name: _getHtml
if (!$childLevel == 0){
$url = false;
if ($image = $child->getData('thumbnail')) {
$urls = Mage::getBaseUrl('media').'catalog/category/'.$child->getData('thumbnail');
$html .= '<img src="'.$urls.'" />';
}
}
just after : " $html .= '<a href="' . $child-&gt;getUrl() . '"><span>'
. $this->escapeHtml($child->getName()) . '</span></a>'; " (near ligne 115)
[/code]

Eric

After step 2 I didn't see the drop down as you said would happened. Went on with other steps and messed up my Magento. Using 1.7

Dan

This solution is wonderful! I enabled category thumbnail images in the left side bar. The only problem I cannot solve is the category name still shows as a text link and I want to remove this. Everything I can think of to remove this also takes away the thumbnail. Any ideas? Thanks!

Sangeetha

Hi guys, I am using magento 1.8... and i has followed every steps carefully.. manytimes.. but, still there is only text in subcategories instead of thumnail image. Please help me. Thanks in Advance!!!

Ars

Kan iemand mij hiermee helpen ? mail mij aub

Arijit

Hi Paul ,I followed your all steps but there nothing showing any thumbnails ,Please help me

Marc

Hello Paul. How are you? I think it does't work on 1.8. I follow the steps but nothing happens (since the second step).
Please could you help us?
Many thanks, Marc

Laat een reactie achter