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

Adding Category Images to the Category Menu
 
Dan Orsborne
Member
 
Total Posts:  72
Joined:  2007-09-20
 

I couldn’t find an option anywhere to add the category images into the category menu so I modified the code myself to add them in. Here is what I changed:

app\code\core\Mage\Catalog\Block\Navigation.php
Line 104

public function getCategoryUrl($category)
    
{
        
return Mage::getModel('catalog/category')
            ->
setData($category->getData())
            ->
getCategoryUrl();
    
}

    
//Start Edit
    
public function getImageUrl($category)
    
{
        
return Mage::getModel('catalog/category')
            ->
setData($category->getData())
            ->
getImageUrl();
    
}
    
//End Edit
Added new function called getImageUrl that accesses app\code\core\Mage\Catalog\Model\Category.php getImageUrl() to get the image name.
Then I added a new function in the same file below the existing function drawItem() to display the images with each item:

//Start Edit
    public function drawItemwithImage($category$level=0$last=false)
    
{
        $html 
'';
        if (!
$category->getIsActive()) {
            
return $html;
        
}

        $children 
$category->getChildren();
        
$hasChildren $children && $children->count();
        
$html.= '<li';
        
        
$html.= ' class="level'.$level;
        if (
$this->isCategoryActive($category)) {
            $html
.= ' active';
        
}
        
if ($last{
            $html 
.= ' last';
        
}
        
if ($hasChildren{
            $cnt 
0;
            foreach (
$children as $child{
                
if ($child->getIsActive()) {
                    $cnt
++;
                
}
            }
            $html 
.= ' parent';
        
}
        $html
.= '">'."\n";
        
$html.= '<a href="'.$this->getCategoryUrl($category).'">';        
        
$html.='<img src="'.$this->getImageUrl($category).'" border="0">';
        
$html.='<span>'.$category->getName().'</span></a>'."\n";
        
$html.= '</li>'."\n";
        return 
$html;
    
}
    
//End Edit

Then I had to create a new .phtml template to use this new functionality:
app\design\frontend\OC\default\template\catalog\navigation\category_singlelevel_image.phtml
(You will need to replace “OC” with your template name or “default” to use this code)

<ul class="products">
        
<?foreach ($this->getStoreCategories(1) as $_category):?>
            <?
=$this->drawItemwithImage($_category)?>
        <?endforeach?>
        
</ul>

Then finally I could use the new template section in the default.xml to display the cateogry list with images:
app\design\frontend\OC\default\layout\core\default.xml
(You will need to replace “OC” with your template name or “default” to use this code)

<block 
       type
="core/text_list" 
       
name="category.menu.singlelevel.image" 
       
as="categoryimage_menu"/>

I’ve attached a screenshot of the result

UPDATE (RoyRubin): added a jpg image of the result as well

Image Attachments
ocbutcher3434.jpg
File Attachments
Magento Example.doc  (File Size: 492KB - Downloads: 514)
 
Magento Community Magento Community
Magento Community
Magento Community
 
Scott
Guru
 
Avatar
Total Posts:  333
Joined:  2007-08-31
Northwest Ohio
 

Interesting. I didn’t see any spot to add an image either. I wonder why this was left out? Maybe they didn’t get to it in time. There’s quite a bit to do after all.

 
Magento Community Magento Community
Magento Community
Magento Community
 
NickL
Sr. Member
 
Avatar
Total Posts:  188
Joined:  2007-08-31
 

nice MOVE! 

Love to see custom coding with this baby.. Keeps me inspired.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Qumer Mumtaz
Jr. Member
 
Total Posts:  21
Joined:  2007-08-31
 

Nice work.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Josue4ever
Sr. Member
 
Avatar
Total Posts:  138
Joined:  2007-10-03
Mexico DF
 

ufff good work

 
Magento Community Magento Community
Magento Community
Magento Community
 
jorries
Member
 
Avatar
Total Posts:  56
Joined:  2007-10-07
 

Great,

Can the DEV team import this functionality in the core of magento?
Would be nice to have this as a default feature

 
Magento Community Magento Community
Magento Community
Magento Community
 
[db] DigitalBlueprint
Member
 
Avatar
Total Posts:  37
Joined:  2007-10-11
Eastbourne, UK
 

I’m trying to get something similar to this working with little success. Here are the changes that I have made…

app/code/core/Mage/Catalog/Block/Navigation.php (added function)

public function getImageUrl($category)
    
{
        
if ($category instanceof Mage_Catalog_Model_Category{
            $url 
$category->getImageUrl();
        
else {
            $url 
Mage::getModel('catalog/category')
                ->
setData($category->getData())
                ->
getImageUrl();
        
}
        
return $url;
    
}

app/design/frontend/default/littlebedroom/template/catalog/category/sub.categories.phtml (new file)

<?$_categories=$this->getCurrentChildCategories()?>
<?if
($_categories->count()):?>
<div class="box generic-box">
    <
h3>Sub Categories</h3>
    <
ul>
        
<?foreach ($_categories as $_category):?>
            <?if
($_category->getIsActive()):?>
            
<li>
                <
a href="<?=$this->getCategoryUrl($_category)?>">
                    
<?if($_imageUrl=$this->getImageUrl($_category)):?>
                    
<img src="<?=$_imageUrl?>alt="<?=$_category->getName()?>" width="100" height="100" /><br />
                    
<?endif;?>
                    
<span><?=$_category->getName()?></span>
                </
a>
            </
li>
            
<?endif;?>
        <?endforeach?>
    
</ul>
</
div>
<?endif;?>

app/design/frontend/default/littlebedroom/layout/main.xml (updated configs)

<!--
Category default layout
-->

    <
catalog_category_default>
        <
reference name="left">
            <
block type="catalog/navigation" name="catalog.leftnav" before="-" template="catalog/navigation/left.phtml"/>
            <
block type="directory/currency" name="currency" before="-" template="directory/currency.phtml"/>
        </
reference>
        <
reference name="content">
            <
block type="catalog/navigation" name="category.subcategories" template="catalog/category/sub.categories.phtml"/>
            <
block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
                <
block type="catalog/product_list" name="product_list"></block>
            </
block>
        </
reference>
    </
catalog_category_default>

<!--
Category layered navigation layout
-->

    <
catalog_category_layered>
        <
reference name="left">
            <
block type="catalog/layer_view" name="catalog.leftnav" before="-" template="catalog/layer/view.phtml"/>
            <
block type="directory/currency" name="currency" before="-" template="directory/currency.phtml"/>
        </
reference>
        <
reference name="content">
            <
block type="catalog/navigation" name="category.subcategories" template="catalog/category/sub.categories.phtml"/>
            <
block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
                <
block type="catalog/product_list" name="product_list"></block>
            </
block>
        </
reference>
    </
catalog_category_layered>

Now, this works fine for retrieving the subcategories and displaying them. The problem lies with retrieving the category image urls, no matter what I try these always come back blank.

Any ideas?

 
Magento Community Magento Community
Magento Community
Magento Community
 
assist.man
Jr. Member
 
Total Posts:  5
Joined:  2008-02-20
 

Hi.

I tried the code posted, but I don’t view the category image. I try to find a solution, but...I don’t find.
Thank for the reply.

 
Magento Community Magento Community
Magento Community
Magento Community
 
fffffffffffff
Jr. Member
 
Total Posts:  5
Joined:  2008-06-01
 

hi,Dan Orsborne

how can I Added new function called getImageUrl that accesses app\code\core\Mage\Catalog\Model\Category.php getImageUrl() to get the image name.

 
Magento Community Magento Community
Magento Community
Magento Community
 
magentokathir
Jr. Member
 
Total Posts:  2
Joined:  2012-04-05
 

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

find the code as below
$html[] = ‘<a href="’.$this->getCategoryUrl($category).‘“’.$linkClass.’>’;
$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->getThumbnailUrl($category).‘“ width="100" height="100" />’;
$html[] = ‘<a href="’.$this->getCategoryUrl($category).‘“’.$linkClass.’>’;
$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,

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