Next Webinar: Maximizing Magento - Get the Most out of Promotions. Register Today!

Magento

Open Source eCommerce Evolved

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: 74)
 Signature 

http://www.igentics.com

Igentics are Internet Engineers, we like to look at things from a different angle. The end result being a fully integrated system encompassing the whole supply chain from supplier to end user, incorporating all legacy systems and data. This increases profits and reduces cost.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Scott
Guru
 
Avatar
Total Posts:  314
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.

 Signature 

Need a Magento designer? I specialize in helping developers and shop owners create Magento themes designed with aesthetic bliss, crisp refreshing style, and usability-focused design. Check out Tealo, the first public Magento theme!

Your Magento Partner for Stunning Creative Work!

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

nice MOVE! 

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

 Signature 

nickL ~ i build stuff
Twitter me: twitter.com/ibuildstuff
My Blog: ibuildstuff.wordpress.com
How did I go magento? : http://www.kanemarie.com

 
Magento Community Magento Community
Magento Community
Magento Community
 
Qumer Mumtaz
Jr. Member
 
Total Posts:  18
Joined:  2007-09-01
 

Nice work.

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

ufff good work

 Signature 

Installing magento on Mexico…

 
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?

 Signature 

Kevin Ansfield
[db] DigitalBlueprint Ltd - Web design, development and magento specialists

 
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:  4
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
Magento Community
Magento Community
    Back to top
 
Sales: Call 877.832.5289 (North America) 310.295.4144 (International)
© Copyright 2008 Varien. Magento is a trademark of Irubin Consulting Inc. DBA Varien
Privacy Policy|Terms of Service
Magento Community Count
41193 users|424 users currently online|87918 forum posts