Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Thumbnail image on the dropdown menu
 
thecrush
Jr. Member
 
Total Posts:  1
Joined:  2008-08-03
 

Hey guys,

Is is possible to assign an image that will be displayed on every category on the drop down menu?

For example, if you do a mouse over on Apparel, the subcategories will have a small image beside it.

Apparel
> Shirt [small t-shirt graphic]
> Jeans [small jeans graphic]
> Dress [small dress graphic]

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Martin
Guru
 
Avatar
Total Posts:  445
Joined:  2007-08-31
Brno | London | Los Angeles
 

Sure, you can assign unique ID to every category in menu and than adapt menu.css and bind small images to whatever category you want ...

Here is how-to add specific IDs to categories in the top navigation list: http://www.magentocommerce.com/boards/viewthread/4485/

 
Magento Community Magento Community
Magento Community
Magento Community
 
bikr
Jr. Member
 
Total Posts:  15
Joined:  2008-12-04
 

I have the ID’s showing up for each LI for category..  I can’t seem to find menu.css anywhere. has this been phased out somehow?

 
Magento Community Magento Community
Magento Community
Magento Community
 
bikr
Jr. Member
 
Total Posts:  15
Joined:  2008-12-04
 

My category:  flat (no fold) became: cat-flat--no-fold- So I tried this in styles.css: 

cat-flat--no-fold-   { background:#000000 url(http://www.printorium.net/media/catalog/product/cache/1/thumbnail/56x/9df78eab33525d08d6e5fb8d27136e95/f/l/flat_2.png); width:50px; height:25px; }

Nothing happens..  Ideas?

 
Magento Community Magento Community
Magento Community
Magento Community
 
bikr
Jr. Member
 
Total Posts:  15
Joined:  2008-12-04
 

Possible getting closer..  I was able to modify the menu item (though not to my advantage)

li#cat-flat--no-fold-   { background:url(http://www.printorium.net/media/catalog/product/cache/1/thumbnail/56x/9df78eab33525d08d6e5fb8d27136e95/f/l/flat_2.png); width:50px; height:25px; }   
li#cat-flat--no-fold- {positition:relative; text-align:left;}
li#cat-flat--no-fold- a,
li#cat-flat--no-fold- a:over {display:block; line-height:1.3em; text-decoration:none; }
li#cat-flat--no-fold- span { display:block; cursor:pointer; white-space:nowrap; }
li#cat-flat--no-fold- { width:163px; margin:0 auto; padding:0 16px; font-size:13px; }
li#cat-flat--no-fold- a:hover { display:block; line-height:1.3em; text-decoration:none; }
li#cat-flat--no-fold- li ul span {white-space:normal; }
li#cat-flat--no-fold- ul li.parent a { background:url(../images/bkg_nav2.gif) 100% 100% no-repeat; }
li#cat-flat--no-fold- ul li.parent li a { background-image:none; }
li#cat-flat--no-fold- div { background:url(http://www.printorium.net/media/catalog/product/cache/1/thumbnail/56x/9df78eab33525d08d6e5fb8d27136e95/f/l/flat_2.png); position:absolute; width:15em; top:27px; left:-10000px; border:1px solid #899ba5; }
the secret seems to be li#cat-flat--no-fold now I just need to figure out how to make it stay identical to the normal menu entries but allow me to insert my image.. the above messes with the alignment a bit, and also my image never makes it in next to the text..  ideas?
 
Magento Community Magento Community
Magento Community
Magento Community
 
bikr
Jr. Member
 
Total Posts:  15
Joined:  2008-12-04
 

Progress report:
I was able to get this to work , though it’s not the prettiest implementation yet, but the proof of concept is working.  I named all of my images the same as the category friendly names to make it easier to print out each image when the menu gets printed.  All I had to do was block off the menu drawing so that I could tell it not to draw the menu the typical way if the level didn’t = 2.  I could have used other tests, but since this is the only menu I have that’s 2 deep it worked for me.. 

Once I did that, it won’t draw the level 2 menu any more , so I had to then test for a positive hit on level 2 and draw the menu..  Her’es the code: 

// assemble list item with attributes
        
        if ($level != 2)
        
{
        $htmlLi
'<li id="cat-' $this->getCategoryID($category->getName()) . '" ';
        
//$htmlLi = '<li';
        
foreach ($attributes as $attrName => $attrValue{
            $htmlLi 
.= ' ' $attrName '="' str_replace('"''\"'$attrValue) . '"';
        
}
        $htmlLi 
.= '>';
        
$html[] $htmlLi;

        
$html[] '<a href="'.$this->getCategoryUrl($category).'"'.$linkClass.'>';
        
$html[] '<span>' $this->escapeHtml($category->getName()) . '</span>';
        
$html[] '</a>';
       
// $html[] = '<img src="http://www.printorium.net/media/catalog/product/cache/1/thumbnail/56x/9df78eab33525d08d6e5fb8d27136e95/f/l/flat_2.png" width=15>';
        
}
        
// render children
        
$htmlChildren '';
        
$j 0;
        foreach (
$activeChildren as $child{
            $htmlChildren 
.= $this->_renderCategoryMenuItemHtml(
                
$child,
                (
$level 1),
                (
$j == $activeChildrenCount 1),
                (
$j == 0),
                
false,
                
$outermostItemClass,
                
$childrenWrapClass,
                
$noEventAttributes
            
);
            
$j++;
        
}
        
if (!empty($htmlChildren)) {
            
if ($childrenWrapClass{
                $html[] 
'<div class="' $childrenWrapClass '">';
            
}
            $html[] 
'<ul class="level' $level '">';
            
$html[] $htmlChildren;
            
$html[] '</ul>';
            if (
$childrenWrapClass{
                $html[] 
'</div>';
            
}
        }
        
if ($level ==2)
        
{
        
        
        
        $htmlLi
'<li id="cat-' $this->getCategoryID($category->getName()) . '" ';
        foreach (
$attributes as $attrName => $attrValue{
            $htmlLi 
.= ' ' $attrName '="' str_replace('"''\"'$attrValue) . '"';
        
}
        $htmlLi 
.= '>';
        
$html[] $htmlLi;
        
        
$html[] '<table><tr><td valign=middle align=center><a href="'.$this->getCategoryUrl($category).'"';  //.$linkClass.'>';
        
$html[] '<span>' $this->escapeHtml($category->getName()) . '';
        
$html[] '';
          
$html[] '';
        
$html[] '<img src="http://getprinted.net/store/brochures/'.$this->getCategoryID($category->getName()).'.png" width=55></span></a></td></tr></table>';
        
        
}

        $html[] 
'</li>';

        
$html implode("\n"$html);
        return 
$html;
    
}
 
Magento Community Magento Community
Magento Community
Magento Community
 
mikecallow
Member
 
Total Posts:  31
Joined:  2011-02-24
Preston, Lancs
 

This works exceptionally well, although you have to manually add each top-level category to your menu.

http://www.h-o.nl/blog/using_category_images_in_your_magento_navigation

HTH,
Mike

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top