Recently, I just finished coding out a website for a client in Magento. You can view the site at www.3graces.com, it was a full switch from some old legacy asp shopping cart to Magento. Im really happy with the way things turned out and the client is too, Magento just has so many wonderful features built-in.

One feature that I found wasn’t built in was a way to display each sub-category with an image, and its name on a landing page. Magento has a nice feature which allows you to assign an image to a category, but doesnt give you a way to make that show up in a listing somewhere.

I setup 6 main categories, with each having multiple sub-categories and I wanted to have a way to show all those sub-categories to the user on a nice page that was pleasing to the eye. Here is an example: Payot Paris by Category.

To achieve this layout, I created a block called sub_navigation.html and placed it in the following directory: app/design/frontend/3graces/default/template/catalog/navigaton/sub_navigation.html

[php]
<div id="categories">
<div class="col_full">

<div class="listing" >
<?php $_maincategorylisting=$this->getCurrentCategory()?>
<?php $_categories=$this->getCurrentChildCategories()?>

<?php if($_categories->count()):?>
<? foreach ($_categories as $_category):?>

<? if($_category->getIsActive()):

$cur_category=Mage::getModel(‘catalog/category’)->load($_category->getId());
$layer = Mage::getSingleton(‘catalog/layer’);
$layer->setCurrentCategory($cur_category);

$catName = $this->getCurrentCategory()->getName();

if($_imageUrl=!$this->getCurrentCategory()->getImageUrl()):?>

<div class="category-box">
<div class="category-image-box">
<a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="/skin/frontend/3graces/default/images/category_image_default.gif"></a>
</div>
<div class="category-name">
<p><a href="<?php echo $this->getCategoryUrl($_category)?>">
<?php echo $catName ?></a></p>
</div>
</div>

<?endif?>

<? if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>

<div class="category-box">
<div class="category-image-box">
<a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="<?php echo $_imageUrl?>" height="80"></a>
</div>
<div class="category-name">
<p><a href="<?php echo $this->getCategoryUrl($_category)?>"> <?php echo $_category->getName()?></a></p>
</div>
</div>

<?
endif;
endif;?>
<?endforeach?>

<?php /* This resets the category back to the original pages category
**** If this is not done, subsequent calls on the same page will use the last category
**** in the foreach loop
*/ ?>
<?php $layer->setCurrentCategory($_maincategorylisting); ?>
<?endif;?>

</div>
<br clear=all>
</div>
</div>
[/php]

If you notice, I placed an if statement in the code that first checks if an image has been set for the category. If one has, it will show it – if there isn’t an image it will show a default image that I have chosen. Here is an example, when only 1 image for a category has been setup, and the rest are the default.

To make the block show up as an option in Magento Admin, you will need to go to CMS > Static Blocks. Once you get there, click Add New Block and fill in the following fields.

Block Title: Sub Category Listing
Identifier: sub_category_listing
Status: Enabled
Content: {{block type=”catalog/navigation” template=”catalog/navigation/sub_category_listing.phtml”}}

Once you have added all those fields, you can click save. Now to enable this static block for a parent category that contains a bunch of sub-categories with images that are set.
Go to: Catalog > Manage Categories

Then click on the parent category to which you wish to add this layout, scroll to the bottom of the first tab “General Information”.

You will see the following fields, just setup as follows:

Display Mode: Static Block Only
CMS Block: Sub Category Listing
Is Anchor: Yes

Now if you go back to your category on the website, you should see your newly setup sub category image listing page. If you arent seeing any images, make sure you setup you default image and placed it in the current directory within your magento install.

Thanks!


154 thoughts on “Magento: Custom Category Images Listing Block Tutorial”

Tim Pearson · November 20, 2008 at 6:29 pm

There is a bit of a inconsistency between filenames used above, sub_navigation.html should be sub_category_listing.phtml

Regards
Tim Pearson

Daniel · December 5, 2008 at 4:25 am

Very nice work you did there!!

Maugan · December 5, 2008 at 11:26 am

Thanks for the post, a great help.

One suggested modification on line 24. use the getSkinUrl() instead of the hard coded path.

<img src=”getSkinUrl() ?>images/category_image_default.gif” alt=”[Image] No image available”>

Chris · December 6, 2008 at 10:38 am

I spent quite a bit of time searching the Magento Site for something even remotly similar with very little luck. This is perfect and exactly what (should be built into Magento) I need!

Thank you so much!!

Graeme · December 16, 2008 at 3:43 pm

Fantastic – I echo Chris’ comments above – this is just one of those things that Magento is missing. I hit a snag with coding the Static Block as I had installed the Fontis WYSIWYG – this would not add the code properly for the static block – thankfully it can be just as easily uninstalled using the Magento Connect manager.
Thank you – first class work

Alex Chudnovsky · December 23, 2008 at 7:50 am

Excellent tutorial, thank you for sharing your knowledge
Cheers,
Alex

David Rojas · January 5, 2009 at 6:15 pm

By far the best tutorial I've read regarding tips for Magento. I agree this should have been added by default to the Magento core. Thanks Jake!

David

Vanessa · January 7, 2009 at 8:52 am

Thanks a lot…!!! works like a charm 🙂

gast · January 8, 2009 at 10:22 am

Excellent!! Thxs a lot!

David · January 8, 2009 at 3:27 pm

Awesome Tutorial! Works great! Only creation:

{{block type="catalog/navigation" template="catalog/navigation/sub_category_listing.phtml"}} should be changed to

{{block type="catalog/navigation" template="catalog/navigation/sub_navigation"}}

    viruthagiri · July 12, 2011 at 4:32 pm

    Thanks, you saved me. I spent 3 hours because of this quote issue

    Manan · September 22, 2011 at 4:11 am

    Thanks David

Nuno · January 10, 2009 at 2:14 pm

How do you get the categories to to be displayed horizontally?

thecybertouch · February 2, 2009 at 12:05 pm

Tried your tutorial, but i can’t get it to work. Were i expect the block to be there is a blank space. Any ideas? My site is based on the blue theme, and the pages are 3 columns.

thecybertouch · February 2, 2009 at 12:07 pm

I would also like to mention that 3graces is an awesome magento site, very well done

thaddeusmt · February 2, 2009 at 1:28 pm

Well played, sir. I was trying to figure out the best way to do this, and you have provided a nice, succinct solution here. Thanks again!

thecybertouch · February 5, 2009 at 5:38 pm

i got it to work! yes…
It was to do with the inconsistency between filenames used above, sub_navigation.html should be sub_category_listing.phtml

I’m a dumbass. Anyway once you get subcategory images working how do you only list products and not show the image?

mrdesigner · February 27, 2009 at 4:39 pm

Awesome Tutorial! ONE of the BEST I’ve seen.I MUST be really stupid because i still can’t get it to work. when i go to the category there isn’t any images there.When i click on one of it’s subcategories i see a 10X size category image!! PLEASE HELP someone PLEASE

khaliq · April 6, 2009 at 9:47 am

i received an error while using this code
Parse error:on line 46

Brian · April 9, 2009 at 4:27 pm

I get a parse error on line 9, I’m using the newest upgrade to magento

Brian · April 9, 2009 at 4:37 pm

Lol nevermind, dumb mistake. When you copy his code, make sure its exactly how you see it, because i copied plain text with all the ‘s in it. Got it working! Thank you!

dlquda · April 10, 2009 at 11:38 am

exactly what i been looking for.
thanks for the great post.

Mark · April 16, 2009 at 1:27 am

Help ?? i get the following error ?

Fatal error: Call to a member function count() on a non-object in /homepages/34/d239231162/htdocs/magento/app/design/frontend/default/blank/template/catalog/navigation/sub_category_listing.phtml on line 9

Running magento v.1.3 using the blank template they provide.

Mark · April 16, 2009 at 5:02 am

Any chance you can provide the file as downloadable, so there are no cut and paste issues. Which this may be after reading Brians note above about “because i copied plain text with all the ’s in it.” not sure what he means about ‘s ???

kinda desperate to get this working if you hadn’t guessed already :o)

Thanks
Mark

    Max · November 9, 2009 at 9:28 pm

    How did u solve it, Mark? Im getting the same error!

    Help please! thx Max

      Max · November 9, 2009 at 9:40 pm

      found the error. line 8 must be:

      <?php if(count($_categories)):?>

khaliq · April 17, 2009 at 9:48 am

but i get Parse error

Alex · April 19, 2009 at 11:00 pm

How can I display the categories horizontol?

THX

Alex

rumblepup · April 20, 2009 at 12:37 am

I’ve been trying to achieve a similar affect, but with product pages. I sell configurable items, and each one has different sets of fabrics. I’ve been trying to figure out a way of creating different static blocks that is a grid view of the fabrics so that the customers can see them, and assign them to the correct product.
Unfortunately, can’t seem to get past how to show a dynamic static block on a product detail page.

stephan · April 25, 2009 at 5:38 pm

if u get a Parse Error: syntax error, unexpected $end

this is often caused by the use of Short Open tags in PHP
try to change all <? to <?php

or allow short open tags in your PHP.INI file. Look for the SHORT_OPEN_TAG directive in your PHP.INI file and set it to “1”

Mark · April 27, 2009 at 6:04 am

Unfortunately this didn’t work either :o( Same error.
Fatal error: Call to a member function count() on a non-object in

Thanks for your reply.
A very frustrated mark.

stephan · April 30, 2009 at 8:39 am

try this code for sub_category_listing.phtml
also read te above reply from me if u get the syntax error after using this code.

getCurrentCategory();
$id = $category->getId();
?>

getCurrentChildCategories(); ?>

getIsActive()): ?>

<a href=”getURL() ?>” title=”htmlEscape($_category->getName()) ?>”>

<img src=”getImageUrl() ?>” width=”140″ alt=”htmlEscape($_category->getName()) ?>” />

” */ ?>

<h3<a href=”getURL() ?>” title=”htmlEscape($_category->getName()) ?>”>htmlEscape($_category->getName()) ?></h3

getDescription() ?>

stephan · April 30, 2009 at 8:44 am

im forgot something,

if ur using this script and magento 1.3 and ur images are not showing.
u have to do the following also:

go to magentoappcodeMageCatalogModelResourceEavMysql4Category.php

search for: $collection = $category->getCollection();

and add this: ->addAttributeToSelect(‘image’)

u will get shomething as:

$collection = $category->getCollection();
/* @var $collection Mage_Catalog_Model_Resource_Eav_Mysql4_Category_Collection */
$collection->addAttributeToSelect(‘url_key’)
->addAttributeToSelect(‘name’)
->addAttributeToSelect(‘image’)
->addAttributeToSelect(‘all_children’)
->addAttributeToSelect(‘is_anchor’)
->addAttributeToFilter(‘is_active’, 1)
->addIdFilter($category->getChildren())
->setOrder(‘position’, ‘ASC’)
->joinUrlRewrite()
->load();
return $collection;
}

Mark · May 1, 2009 at 10:30 am

Thanks for your help stephan,

I don’t think this is destined to happen for me! No Parse Error but now nothing showing and when I view source it’s as if it isn’t even trying to load sub_category_listing.phtml

I have a default image and images for sub categories, but they still don’t display. Just shows the title of the main category your on.
I wish someone would write an extension for this, that I could just install and it would work :o)

Thanks
Mark

stephan · May 1, 2009 at 4:23 pm

hi mark,
Its not working because this website scrambled up the php code.
im gonna upload the file for u so u have the right php code

u can download the subcategory listing file from:

http://www.megafileupload.com/en/file/100989/SCL-zip.html

hope this will work for u.

and don’t forget to add: ->addAttributeToSelect(’image’)

to the category.php file

Mark · May 5, 2009 at 1:07 am

FANTASTIC!!! Now we are rocking! THANK YOU. All works except the images i’ve added for the sub categories don’t display :o( They are added in the admin and display in the admin. When I view the source it’s writing out the following:

Small

ALT text is appearing and the links are working… but it’s not writing out the image paths for some reason. If I view one of the sub categories then it’s image displays with the products below, so the sub category images are definitely there.

Can you help me out again? I owe you big style :o)

Thanks massively again for you help!
Mark

Mark · May 5, 2009 at 1:11 am

Ooohps… this is the source:

Small

Mark · May 5, 2009 at 1:18 am

If you click the word small in previous posts, it takes you through to the site.
<img src=”” width=”140″ alt=”Small” />

stephan · May 9, 2009 at 5:05 pm

mark,

go to magentoappcodeMageCatalogModelResourceEavMysql4Category.php

search for:
$collection = $category->getCollection();

and add this:
->addAttributeToSelect(’image’)

u will get shomething as this:

$collection = $category->getCollection();

$collection->addAttributeToSelect(’url_key’)
->addAttributeToSelect(’name’)
->addAttributeToSelect(’image’)
->addAttributeToSelect(’all_children’)
->addAttributeToSelect(’is_anchor’)
->addAttributeToFilter(’is_active’, 1)
->addIdFilter($category->getChildren())
->setOrder(’position’, ‘ASC’)
->joinUrlRewrite()
->load();
return $collection;
}

Damodar Bashyal · May 11, 2009 at 11:13 pm

I posted question to magento with no luck:
————————————————-
I need to show sub-categories of certain category from cms page. Is it possible?

suppose i have category id 32 and it has sub-categories. I need to show sub-categories of id 32.

is there something like?
{{block type=”catalog/navigation” name=”catalog.category” template=”catalog/category/example.phtml” category id=32}}
—————————

Mark · May 12, 2009 at 12:39 am

Hi Stephan,

That was already added and it still just displayed empty image tags, with no images displayed :o( It’s just not getting the image paths? This is driving me mad now!

Thanks
Mark

stephan · May 12, 2009 at 9:22 am

hi mark,

i dont know whats wrong,
i think the problem is within ur category.php file

here u can download the working category.php file

http://www.megafileupload.com/en/file/102917/magentocategoryfile-zip.html

u have to save this php file to:

magentoappcodecoreMageCatalogModelResourceEavMysql4Category.php

and dont forget to refresh ur cache in magento admin

Hope this works for u.

Chris · May 14, 2009 at 5:56 am

Hi,

I just wanted to thank you for this awesome tutorial! This is exactly what I needed for my store and you read my mind 🙂

It’s a shame that the magento core developers did not implement this by default because I’m sure that lots of shops require this functionality!

Anyway, thank you very much

Keep up the good work
Chris

Mark · May 15, 2009 at 12:36 am

Hi Stephan,

Thanks for all your help! Added your file and cleared cache, it is still generating blank image tags :o(

Thanks
Mark

stephan · May 15, 2009 at 9:15 am

mark,
what version of magento ur using?
if ur using an older version, update then to 1.3.1
and install this files again.
with this version it has to work.

PH83 · May 15, 2009 at 5:31 pm

having issues with this tut i keep getting an error on line 0-all the way through copied exactly even went through and changed link from his theme but nothing some get a change link the file that does work for sure i have version 1.3.1

chhaya · May 21, 2009 at 12:04 am

Hi stephan ,i have read this tute and applied it but I think this file(sub_category_listing.phtml) is not cosidered at all as when i put die(); in it nothing happend .Is there any requiremnet to specify file name in catalog.xml or somewhere else

chhaya · May 21, 2009 at 12:06 am

Magento ver is 1.1.8. can anybody help?

Mark · May 26, 2009 at 12:06 am

Hi Stephan,

Thank you VERY much for all your help, i still can’t get this to work and have wasted too much time on such a simple thing. I am reverting back to using zencart which does this with ease :o) Need to do this as the clients site is starting to get behind schedule.

Thanks again Mark

chhaya · May 26, 2009 at 10:53 pm

Hi Mrak You can try this for displaying images

here $catid is the id of the category for which you want to show image.

$_category = Mage::getModel(‘catalog/category’)->load($catid) ;
$_imgHtml = ”;

if ($_imageUrl = $_category->getImageUrl()) {
$_imgHtml = ‘htmlEscape($_category->getName()).'” />’;
$_imgHtml = $_helper->categoryAttribute($_category, $_imgHtml, ‘image’);
}
if($_imgHtml){

$o .= ‘getId().'” href=”‘.$base_url.$category->getUrlKey().'”>’.$_imgHtml.’‘.$desc;
}

chhaya · May 26, 2009 at 10:59 pm

Sorry instead of these lines

if($_imgHtml){

$o .= ‘getId().’” href=”‘.$base_url.$category->getUrlKey().’”>’.$_imgHtml.’‘.$desc;
}

try these line

if($_imgHtml){

$o .= ‘getUrlKey().'”>’.$_imgHtml.’‘;
}
echo $o;

chhaya · May 27, 2009 at 12:32 am

or just echo $_imgHtml ;

DeadlyPorpoise · May 28, 2009 at 7:00 pm

Hi Chhaya,

Did you ever solve the fact that sub_category_listing.phtml is never referenced?

I have the same issue using Magento 1.3.1

Waz · June 2, 2009 at 6:58 am

Is it possible to recap this discussion?

As Magento moves along, some of this has changed, it would be nice to have a concise set of instructions and code examples for 1.3.2.

It’s a great feature and I’m sure lots of folks would use it if it was a little less confusing to deploy and worked as it does on the reference site. The main challenges I have seen are:

1) Categories present in a list format vs grid format.
2) Category images are not used, only default images come up.

chhaya · June 8, 2009 at 5:34 am

Hi ,
yes i also faced the same problem you try this ,here $catid is the category id
$_category = Mage::getModel(’catalog/category’)->load($catid) ;
$_imgHtml = ”;

if ($_imageUrl = $_category->getImageUrl()) {
$_imgHtml = ‘htmlEscape($_category->getName()).’” />’;
$_imgHtml = $_helper->categoryAttribute($_category, $_imgHtml, ‘image’);
}
if($_imgHtml){

echo $_imgHtml;
}

Rich · July 29, 2009 at 4:45 am

I have tried everything said on this website to get this to work and when i click on my main category it just comes up with a blank page like i have no items. i have even downloaded the phtml file listed on this page but still doesn't show pictures of my catagories just an empty page. please help.

rolo · August 4, 2009 at 10:00 pm

Awesome Tutorial! Works great!…You are a genius Stephan.
How do you get the categories to be displayed horizontally?

nikl · August 12, 2009 at 7:51 am

I can't get this to work with 1.3.2.1. Anybody managed to do this?

nikl · August 13, 2009 at 10:28 am

Sorry, had wysiwyg editor activated which inserted a whole lot of unneeded tags., It is working like a charm actually!

The two things I am trying to figure out now are: how can I make layered navigation work if I set category display to static block only? Is this possible at all?
And another thing: why are there spaces between the category pictures on some landing pages if I set the display to block? (Like here: http://3graces.com/brands/perlier/categories/ ) I am having the same problem on one of mine.

Besides that, very nice work man, thank you! And the sites looking very good too btw!

emily · August 14, 2009 at 11:06 am

I cant get this to work with 1.3.2.3. Any ideas? I just get a blank page?

Scott · August 18, 2009 at 1:44 pm

Hi there, for all of you having issues with this I just figured out that when you copy the {{ block code the " (quotations) need to be typed over with quotes from your keyboard. I guess it was copying a different quote type. I wasted hours trying all kinds of different things and the second I changed that it worked like a snap.

    pieter · November 20, 2009 at 2:10 pm

    Thanks! That solved the problem!!

    Colin · March 4, 2010 at 1:53 am

    Yes! That solved my problem too.

Patrick Konsor · August 21, 2009 at 2:31 pm

I got this to work with 1.3.2.3. This may not apply to others, but with my install the quotes for the block tag were being changed when stored (some were delimited with slashes ", others were formatted like “ as opposed to "), which meant they weren't properly parsed later. I added the following to the top of the /index.php file..

function stripslashes_deep($value) {
$value = is_array($value) ? array_map("stripslashes_deep", $value) : stripslashes($value);
return $value;
}
$_POST = array_map("stripslashes_deep", $_POST);

Then I went back to the page to edit the static block and changed the block tags quotes to normal double quotes, and it worked. Mind you, the sub_category_listing.phtml file I downloaded originally had a PHP error, but it's easily fixed.

coasttocoastdarts · August 26, 2009 at 8:19 pm

Some code has to have changed in 1.3.2.1.. I have the latest version 1.3.2.3 and I have the same issues.. Blank screen… Also may have something to do with template…

Anyway, I am going to search more however this is the best link I found so far.. Thank you!

Svelte · August 27, 2009 at 1:18 pm

If you have trouble getting the static block to show, it could be because you are using the wrong type of quote marks (") in the admin. I copy and pasted straight from here and after a lot of head scratching noticed my quote marks were not quite right. Random I know…
Great piece of code though, thank you very much.

bogblu · September 8, 2009 at 8:30 am

remember to change favicon 🙂

Marc · September 9, 2009 at 1:12 pm

I got it, the " in the block where wrong, cant see the difference lol.

{{block type="catalog/navigation" template="catalog/navigation/sub_category_listing.phtml"}}

Just redo all the "

Only the image isnt showing atm.

M.H. · September 9, 2009 at 2:08 pm

Hmm i'm useing 1.3.2.2 and it's not working for me.
The images are the problem, they are blank.

http://www.magentocommerce.com/boards/viewthread/

Does anyone knows what to change into the <img> code?

Marc · September 11, 2009 at 9:44 am

If u get <img src="" > , the empty image:

just make sure in the admin part u upload an image with the category products. I was struggling for hours on that and didn't notice u had to upload an image ;x

    Dean Mortimer · December 8, 2009 at 12:29 pm

    I had this problem as well and realised that my installation wasn't using Category.php to load the sub category information. Turns out that I had flat catalogs turned on so the file you want to amend is:

    appcodelocalMageCatalogModelResourceEavMysql4CategoryFlat.php

    If this file doesn't exist then copy the one from

    appcodecoreMageCatalogModelResourceEavMysql4CategoryFlat.php

    and then find the _loadNodes function. This is where the sql for the extracting info from the flat category table is built and executed. In the _loadNodes find where the sql is built, which should look like this:

    $select = $_conn->select()
    ->from(array('main_table'=>$this->getMainStoreTable($storeId)), array('main_table.entity_id', 'main_table.name', 'main_table.path', 'main_table.is_active', 'main_table.is_anchor'))

    and add an extra field to select, in this case the "image" field by changing the line to look like this:

    select = $_conn->select()
    ->from(array('main_table'=>$this->getMainStoreTable($storeId)), array('main_table.entity_id', 'main_table.name', 'main_table.image', 'main_table.path', 'main_table.is_active', 'main_table.is_anchor'))

    Hope this helps.

    Thx for starting this post its has been of great help to me.

luis · October 8, 2009 at 9:38 am

This is by far the best tutorial out there when it comes to Magento. You Rule!

biglittleWolf · October 10, 2009 at 6:31 am

Hi I'm new to magento and although I got the tutorial working, I wonder if anyone cane help me with adding the description text. I tried <?php echo $this->htmlEscape($_category->getDescription()) ?> but nothing seems to happen.

Mike · October 27, 2009 at 5:48 pm

Hey, I really dig what you did with the site, http://www.3graces.com. Looks great. I'm looking to utilize what you have for your featured products slider. Is that a jquery slider? If you can point me in the direction on where I can find that code, the library I need that would be great.

Thanks,
Mike

Pranil Singh · October 30, 2009 at 1:33 am

Hey there. I"m new to magento, and i just want to create a static block that displays all of the top level categories (sub cats aren't too important, can add code for that in if need be). I've tried following a number of tutorials, but no luck. Any hints/tips?

John · November 9, 2009 at 12:45 pm

Okay everyone, if you don't have sohort tags enabled, it won't work.

replace all the <? tags with <?php

It'll work then.

Did anyone solve the horizontal issue yet ?

robert roorda · November 16, 2009 at 7:18 pm

Hello.
Thought I should report that this worked fine for me on Magento 1.3.2.3 with no real difficulty. A few points that might be worth considering:
1. When I copied the *.phtml code from the tutorial, I first cut and paste if to my text editor, which is TEXTWRANGLER (macintosh). This may have fixed the quotes issues experienced by other users. I suspect Jake may have updated his tutorial code in response to comments so this might not be a concern.
2. I used FireBug (a Firefox extension that I highly recommend) to copy the *.css entries referred to in the *.phtml file from the 3graces.com website and used that as a basis for my syles. Before doing this the thumbnail images were arranged vertically. This is an essential step to format the output.
Hope this is helpful
P.S. My site(s) are up and running if you want to take a look or copy code:
hautemama.ie and hautemamaboutique.com

    Martin · November 29, 2009 at 4:28 pm

    Hi Robert,

    I'm having trouble locating which css entries to add/modify. Its working on my site, but in vertical rows – want to in 4 columns.

      robert roorda · December 8, 2009 at 9:26 pm

      Martin
      Below, please find the *.css code that I used. I don't specifically set it to 5 columns, but the images size and the available space make it that way. On slight glitch: if you have a category title that take up more than 1 row of text it will push the other categories off to one side.
      -rob

      <code>

      /* Category landing */

      .category-box {
      text-align: center;
      float:left;
      margin:0px 15px 15px 0px;
      width: 120px;

      }

      .category-image-box {
      /*
      background: url(../images/category_image_bg.gif) no-repeat;
      */
      height:175px;
      width: 120px;

      }

      .category-image-box img {
      margin: 5px 5px 0px 0px;
      border-width: 1px;
      border-color: #4b3425;
      border-style: solid;
      }

      .category-name a:link, .category-name a:visited {
      color: #7c2b87;
      font-weight: bold;
      font-size: 14px;
      text-decoration: none;
      line-height:16px;
      }

      .category-name a:hover, .category-name a:active {
      color: #4b3425;
      font-weight: bold;
      font-size: 14px;
      text-decoration: none;
      line-height:16px;
      }

      </code>

        amy · December 14, 2011 at 1:13 am

        Robert…where did you save this? what .css file?

sven · January 16, 2010 at 8:03 am

Hi!
Works perfect! But two questions:
– i only want to list subcategories and not sub-subcategories.
– i want the subcategories to be listed by 3 one one line (now there's only one on one line)

TylerCallie · March 2, 2010 at 3:53 am

Specialists tell that business loans help a lot of people to live their own way, just because they can feel free to buy needed things. Moreover, banks offer student loan for young and old people.

Giclee Canvas Prints · March 11, 2010 at 4:16 pm

Thanks seems to work great

Wildwood · April 19, 2010 at 2:30 am

Have tried following this tutorial but am getting the blank page. Any chance you can give a working sub_category_listing.phtml file?I really want to get this to work! I am using 1.4.

And I have changed the quote marks for the static block.

Thanks!

Alex · April 20, 2010 at 9:19 am

respect man, awesome guide.!!!!
could you please help us with the horizontal displaying ??? thx
i had also problems but i had to modify in script the correct path from my server.
now it's working like a charm
thanks again

yoostore · April 29, 2010 at 10:07 am

Can anybody help me how to show it vertically ?

No there are just a liste, but i want it vertically 🙁

yoostore · April 29, 2010 at 10:10 am

Can anybody help me how to show it horizontally ?

choussamaster · May 9, 2010 at 9:43 pm

For parse error replace "<? " with "<?php " and
<?endforeach?> with <?php endforeach ?>
<?endif;?> with <?php endif;?>

Kathy · May 11, 2010 at 8:53 am

Thanks for this, just what I needed.

I have a problem in the the drop down menus still show the sub categories, I have tried all the options in the category tabs, but this doesn't work.

So where on the 3graces.com site it has shop by category, the menu dropdown does not show the subcategories, but only leads to the page where the grid, on my site I get the grid ok, but the menu still shows all of the subcategories as a dropdown.

Not sure if I am missing something really simple, but it is driving me nuts!

Rolo · May 18, 2010 at 11:11 pm

I have problem in 1.4 ..any?

Rana Shuja · May 23, 2010 at 4:52 pm

Hi!
I am very much impressed what you have done in 3grace.
I have tried every thing what you have mentioned in your tutorial to get the same result but failed. I request you to have a glance at tutorial Or suggest some thing else to get the same result like 3grace.
Thanks!

Rana Shuja

Traci Kaspar · May 25, 2010 at 4:43 pm

After playing around with this all day – I have noticed that someone needs to update the steps from the original blog. 1. Copy the original code into a code editor. Name it sub_category_listing.phtml
*This should delete any issues with copying*

2. Follow step two from the blog for creating a static block – make sure you replace the double quotes with those from your keyboard – it is not seeing them correctly:

{{block type="catalog/navigation" template="catalog/navigation/sub_category_listing.phtml"}}

3. If you have a large image in your category pages please edit
app/design/frontend/default/YOURTHEME/template/catalog/category/view.phtml
and comment out the following code (version 1.4.0.1):

<?php if($_imgUrl): ?>
<?php echo $_imgHtml ?>
<?php endif; ?>

4. Do not want the Category names at the top of the page? edit the same file
app/design/frontend/default/YOURTHEME/template/catalog/category/view.phtml
and remove this line:

<h1><?php echo $_helper->categoryAttribute($_category, $_category->getName(), 'name') ?></h1>

5. Ok – now you are ready for CSS. Go to the file skin/frontend/default/YOUR THEME/css/boxes.css

To get the vertical display like here – add this code at the bottom (taken from 3 graces.com)
You can change this however you like until you get the desired effect.

/***** Category Sub Listing *************************************/

.category-box {
text-align: center;
float:left;
margin:0px 15px 15px 0px;
width: 125px;

}

.category-image-box {
background: url(../images/category_image_bg.gif) no-repeat;
height:104px;
width: 125px;
}

.category-image-box img {
padding: 10px 0px 0px 0px;
}

.category-name a:link, .category-name a:visited {
color: #7c2b83;
font-weight: bold;
font-size: 12px;
text-decoration: none;
}

.category-name a:hover, .category-name a:active {
color: #7c2b83;
font-weight: bold;
font-size: 12px;
text-decoration: underline;
}

That's it! I hope this helps someone else not spend hours figuring it out.

    Gary · July 22, 2011 at 12:03 pm

    Perfect well done
    All I need to know now is how to center the images across the page. Even 3graces hasn't managed that

Rolo · May 27, 2010 at 6:51 pm

Thanks Traci Kaspar, but I dont have boxes.css in 1.4 version.

    Traci Kaspar · May 30, 2010 at 12:10 pm

    Just add it to the bottom of your main css – maybe styles.css ?

      rolo · September 11, 2010 at 9:02 am

      Can I do it horizontal?

Wedding Photography · June 2, 2010 at 8:03 am

If anyone is struggling with this make sure that you sort the quote marks in:

{{block type="catalog/navigation" template="catalog/navigation/sub_category_listing.phtml"}}

I was looking at this for ages and it helped sort it

tramadol · June 10, 2010 at 6:28 am

Your site was extremely interesting, especially since I was searching for thoughts on this subject last Thursday.
I’m Out! 🙂

DJOneR · June 24, 2010 at 11:24 am

Brilliant — thanks a lot dude!

Adrian · July 2, 2010 at 4:38 am

A couple of suggestions for you:
(1) change the favicon.ico for your theme – at the moment it whos the Magento logo.
(2) Remove the "Help Us to Keep Magento Healthy – Report All Bugs (ver. 1.3.2.3)" line from the footer. This not only tips off hackers about the version you use and possible exploits, it also gives Magento's publishers a free back-link from every page of your site.

Another point, a bit more difficult for you to fix perhaps; your header and footer text overflow their DIVs on lower browser resolutions. I have seen this in countless templates; the authors tend to use the same skeleton CSS and repeat their errors.

john · September 2, 2010 at 5:51 pm

Does anybody know how can this work with 1.4.1.1. I tried and my sub-categories did not show.
Thanks

    devi · March 18, 2011 at 5:18 am

    same pblm for me also its showing blank page

Alex · September 9, 2010 at 2:21 pm

Anyone got this to work for 1.4.1.0? We are in need of this exact block for our store but can’t get it to work. We get a blank page, been reading the comments without success. Help would be appreicated.

I have replaced the double quotes, short tags is enabled. I’m clueless.

rolo · September 10, 2010 at 5:18 pm

Great!!!…but see the categories in horizontal … is it possible?

rolo · September 13, 2010 at 12:07 pm

It's posible view the categories in horinzontal?

mRko · September 24, 2010 at 11:06 am

check out this link from the Magento Wiki it worked like a charm on Version 1.4
http://www.magentocommerce.com/wiki/4_-_themes_an

I was getting memory leaks using the script provided from this blog post. but thanks for posting it atleast got me going in the right direction.

shiva · October 15, 2010 at 12:12 am

http://www.magentocommerce.com/boards/viewthread/

this one works guys

thanks.brendan.

Brady · October 16, 2010 at 9:00 am

this works but i could never get category image to show..

wellsee · December 6, 2010 at 10:45 pm

i'm using 1.4.1.1 and there is nothing showing there

Mike · December 11, 2010 at 5:26 pm

It works in 1.4.1.1 I had it up first try. You need to double check all the " "

I also would like to have the sub's show horizontal. I have been experimenting but no luck so far. Anyone have this horizontaly?

fourroses · January 3, 2011 at 10:48 am

works for 1.4.1.1

make sure u call the html file u upload: sub_category_listing.phtml
then u can use above code.

archbishop · January 5, 2011 at 3:17 pm

I'm trying to the get this to work, using the magento wiki page MRko posted, but it's not working.

I have the file at:
app/design/frontend/default/TU_TEMPLATE/catalog/navigation/category_listing.phtml

I created a static block with:
Block Title: category Listing
Identifier: category_listing
content: {{block type="catalog/navigation" template="catalog/navigation/category_listing.phtml"}}
status: Enabled

Then I edited my category to be:
Display Mode: Static block only
Is Anchor: No
CMS Block: category Listing
Custom Design: TU_TEMPLATE

Can anyone shed some light on why this isn't working? If I change the content of static block to just be some text, that text will show up on the category page. But I can't seem to get the phtml file to be executed. Even if I replace the entire file with some text, that text does not get displayed on the category page.

Thanks

jen · January 11, 2011 at 12:27 pm

i have tried to change the size of the category images but nothing is working. the images are coming up huge! can someone help? i have 1.4.2

Toros IT · March 21, 2011 at 9:59 am

is it possible to add some code thats sorts the categories alphabetically?

Mike · March 24, 2011 at 1:44 pm

Hi Jake,

Thank you for posting this. Love it. One SEO question. Currently the images alt tags are populated by the Name filed from the catagory. How can I change it to be populated by the Page Title filed?

JR Burns · March 29, 2011 at 9:19 pm

Does this work on version 1.3.4?

Richard · March 31, 2011 at 2:33 pm

for anyone still trying to figure out how to align them horizontally, get your CSS skills up to date.
The classes and ID's used, put those in your theme CSS file, probably style.css and make your changes.:
/*=======================================*/
/* category images */

.category-box{
float:left;
}
.category-image-box{

}

.category-name{

}

.listing{

}

.col_full{
}

#categories{
}

rails questions · April 13, 2011 at 1:33 pm

Can any one provide the exact step for displaying in horizontally

ucef pro · April 29, 2011 at 6:58 pm

hi guys
i have somme probleme in layout and i want someone explain me how can i create a nwe block in magento
with my best wishes to you

shabbyonline · July 19, 2011 at 11:18 pm

Awesome It works Perfect Thanks for writing such a nice tutorial.

For those Still getting error plz remove old comma and type comma again in block code given below :

{{block type="catalog/navigation" template="catalog/navigation/sub_navigation.phtml"}}

stuarthammill · July 28, 2011 at 8:07 am

thank you it works great but I am no CSS guy so I need some help to get these Horizontal
please can someone help

Jaco · October 2, 2011 at 5:00 pm

Anyone already got the horizontal grid working?

@ronhof · October 3, 2011 at 6:47 am

I guess you need to read up on CSS, but i'll try to push you in the right direction. Here is what you could think of.

The <div class="category-box"> groups together the image <div class="category-image-box"> with the text <div class="category-name">

So if you use the css float:left; inside styles.css (/skin/frontend/yourskin/default/css/styles.css) you will effectively place the group left aligned, whereas the next group is placed immediately to the right (left adjusted) – and so on. When there is no more room left on that row, the next box will fall down the second row. Example below also define a specified width so every box is the same and all columns will be aligned. You should also consider defining a specific height as well and some margin and maybe a nice background image:

.category-box{
width:170px;
height:200px;
margin-right:6px;
float:left;
}

func0der · October 8, 2011 at 8:00 am

This is exactly what i was searching for. Magneto seems to do everything, but most it just wrong. And the easiests things it can't even do.

Whatever. Some things i wanted to say about this tutorial:
1. You wrote in the before the code block that we should create files with .html suffix which should be .phtml
2. The one thing with the skin url method which was already mentioned but is still unchanged
and 3.
YOU have one of the worst code styling ever.
What i wrong with you opening a new php tag for each line of your code? I once say a php software which echoed each an every line of html in a single echo. This was worst and i thought it would never happen to me again but now…
I fixed the code and added some comments to it + some indention.

And here it is: http://pastebin.com/6ct87kxh

Thanks for your post anyway. This is a great thing and i really apprechiate your work 🙂

Greetings
func0der

    glenn · March 14, 2012 at 7:33 am

    Hello,

    I try your code, and.. I Think that is work, but he find no pictures.. (URL failure ? )

    Where must I specify the picture for each category.. ?

    Thank you..

defender · November 8, 2011 at 7:32 am

funcoder,

Not too nice. You start with WOW! This is just what I need and end with you write horrible code. News flash, all you did was tidy it up. So, he WROTE the code and you tidy it up like a maid and you give him a hard time?!?!? ROFL!

Pierre FAY · November 24, 2011 at 7:39 am

you can look at http://www.about-magento.com/magento-create-block… if you want to know more about blocks 😉

Pierre.

Praful · January 30, 2012 at 2:44 am

Hello, How i cam set all categories in vertical menu like http://www.flipkart.com

pls help me to make that kind <mega >menu

Bill · February 12, 2012 at 9:44 pm

I am very new to this. I am using v1.6.2 Magento. I have used the code from this site tutorial, and from another post that said they cleaned it up (http://pastebin.com/6ct87kxh ) and I still cannot get it to work (neither version). I retyped my quote marks as suggested in several posts and I went from nothing showing up on my page to having the actual page code (code for the sub_category_listing.phtml) showing where the sub-categories should be. Any help would be greatly appreciated. I don't know what I have done wrong…

Spirulina · March 7, 2012 at 12:24 pm

Thanks. It worked great!

Glenn · March 18, 2012 at 11:45 am

Hello !

It's working on 1.6.1 with this code in the .Phtml file :
<?php foreach ($this->getCurrentChildCategories() as $_category): ?>
<?php if($_category->getIsActive()):
$_category = Mage::getModel('catalog/category')->load($_category->getId());
?>
<div class="category-list-view">
<a href="<?php echo $this->getCategoryUrl($_category)?>" title="<?php echo $_category->getName()?>">
<img src="<?php echo Mage::getBaseUrl('media').'catalog/category/'.$_category->getThumbnail(); ?>" height="200px" width="200px" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" />

<h3><a href="<?php echo $this->getCategoryUrl($_category)?>" class="name" title="<?php echo $_category->getName()?>"><?php echo $_category->getName()?></h3>
</div>
<?php endif; ?>
<?php endforeach; ?>

But, .. How can I an horizontal display.. ?..

Thank you.. !

    nil · April 14, 2012 at 11:38 am

    Hi Glenn
    I am using magento 1.6.2.0 my filename sub_category_listing.phtml under /app/design/frontend/base/default/template/catalog/navigation. block identifier sub_category_listing and content {{block type=”catalog/navigation” template=”catalog/navigation/sub_category_listing.phtml”}}.
    NOTHING DISPLAY ON HOME PAGE
    Code Here
    <div id="categories">
    <div class="col_full">
    <div class="listing" >
    <?php $_maincategorylisting=$this->getCurrentCategory()?>
    <?php $_categories=$this->getCurrentChildCategories()?>
    <?php if($_categories->count()):?>
    <? foreach ($_categories as $_category):?>
    <? if($_category->getIsActive()):
    $cur_category=Mage::getModel('catalog/category')->load($_category->getId());
    $layer = Mage::getSingleton('catalog/layer');
    $layer->setCurrentCategory($cur_category);
    $catName = $this->getCurrentCategory()->getName();
    if($_imageUrl=!$this->getCurrentCategory()->getImageUrl()):?>
    <div class="category-box">
    <div class="category-image-box">
    <a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="/skin/frontend/3graces/default/images/category_image_default.gif">
    </div>
    <div class="category-name">
    <a href="<?php echo $this->getCategoryUrl($_category)?>">
    <?php echo $catName ?>
    </div>
    </div>
    <?endif?>
    <? if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>
    <div class="category-box">
    <div class="category-image-box">
    <a href="<?php echo $this->getCategoryUrl($_category)?>"><img src="<?php echo $_imageUrl?>" height="80">
    </div>
    <div class="category-name">
    <a href="<?php echo $this->getCategoryUrl($_category)?>"> <?php echo $_category->getName()?>
    </div>
    </div>
    <?
    endif;
    endif;?>
    <?endforeach?>
    <?php /* This resets the category back to the original pages category
    **** If this is not done, subsequent calls on the same page will use the last category
    **** in the foreach loop
    */ ?>
    <?php $layer->setCurrentCategory($_maincategorylisting); ?>
    <?endif;?>
    </div>

    </div>
    </div>

garynb · March 27, 2012 at 12:17 pm

I am using subcategory_listing.phtml and all works fine except for one problem. When I delete a category a gap appears on the front end images where the deleted category used to be. I have tried every which way to figure this out but am really stuck. The categories are definitely gone even in the database but is seems that they are leaving ghosts which are making the category pages a bit untidy.

Anyone have any ideas?

    garynb · March 29, 2012 at 6:05 am

    I have found a fix for the above by re-arranging the sub categories. For some reason if the categories are in a specific order they will display without any gaps but why this should be I have no idea. It's not even anything to do with ID numbers being in numerical order

nil · April 11, 2012 at 11:18 am

Hi
I am using default website template what will be my images path in phtml file OR possible can i get http://www.3graces.com theme please

nil · April 14, 2012 at 11:36 am

I am using magento 1.6.2.0 my filename sub_category_listing.phtml under /app/design/frontend/base/default/template/catalog/navigation. block identifier sub_category_listing and content {{block type=”catalog/navigation” template=”catalog/navigation/sub_category_listing.phtml”}}.
NOTHING DISPLAY ON HOME PAGE

Miguel Ramos · July 2, 2012 at 4:36 pm

Thanks for this code. It's not working perfectly, but I'm almost there. First was the quotes problem in combination with having to change the directory to place the phtml file in (I'm using hellowired, so IN MY CASE it goes in /app/design/frontend/default/hellowired/template/catalog/navigation instead) .

Then I found the code was missing the size definition for the default image and solved that. The final problem is that the images appear in one column instead of placed out in a grid.

Miguel Ramos · July 2, 2012 at 6:45 pm

btw, @ronhof, thanks for the css tip. It was the final detail I needed. It now works perfectly. If anyone is using hellowired and needs specific advice on putting it together I'll help out.

    Billy Haynes · December 25, 2013 at 7:17 pm

    I’m using version 1.7.0.2 , I have added the file to (/app/design/frontend/default/hellowired/template/catalog/navigation ) as I am using the HelloWired theme as well. All I get is a blank category page, what did you have to tweak to make this work?

Michu · July 3, 2012 at 11:24 am

Jake, thanks for this code.
I had to tweak it to make it work for me (maybe because I'm using Magento 1.7 and hellowired theme). I also want to thank @ronhof for the CSS notes.
I must mention func0der because I want to agree with what you say but dislike the way you say it (I'm with defender here). Jake made something useful and shared it with all. I certainly benefitted from his generosity and I'm sure many other have as well. Improve the original and criticize if you must, but, please, chill and don't be offensive.

    Jarod · July 23, 2012 at 6:24 am

    Michu, could you share your tweak of the code? I'm using Magento 1.7 also and I couldn't get it to work. Thanks.

      Dion · August 3, 2012 at 10:27 am

      First of all, nice code! It worked for me very well in Magento 1.7.

      @Jarod, i found an error on line 6.

      I did only remove line 6 -> <?php if($_categories->count()):?>
      and line 42 -> <?endif;?>

      And it showed my subcategory perfectly! Good luck!

        Adam · September 4, 2012 at 8:38 am

        I deleted these two lines but still no luck 🙁

      Rolf · August 17, 2012 at 7:09 am

      Hallo Michu, is it possible that you send me your tweak code, because i couldn't get it to work. Thanks already for your help.

loeffel · August 13, 2012 at 8:17 am

This is working great as long as I don't use flat category. If I use flat category, my category image listings are suddenly empty.

loeffel · August 14, 2012 at 10:29 am

Ok, it seems this is caused by "<?php if($_categories->count()):?>" – also, the categories can not be fetched for some reason, instead it will simply output "Array"

loeffel · August 14, 2012 at 10:41 am

About my previous comment: removing count() actually does fix it for flat catalog!

Guenther Bosch · November 8, 2012 at 8:13 am

If you paste this …
{{block type=”catalog/navigation” template=”catalog/navigation/sub_category_listing.phtml”}}
… to your admin settings ….
Be aware that the ” cause issues when loading the page. Mine was blank. Replace with " and you are fine.

enass · November 25, 2012 at 1:19 am

please help me with my issue

i need the same everything as you talking and i make subcategories but i need some of products in the page and when click into any product will give me specific subcategory.

Thank you for you assitance

Amar · January 16, 2013 at 3:48 pm

Nice tutorial, another similiar tutorial that is good http://churchillit.com/step-by-step-guide-to-crea

The only problem im having is the filters are appearing directly below this now, how would i get the filters to go back to where they should be??

magento development · February 27, 2013 at 1:58 am

One function that I discovered was not designed in was a way to demonstrate each sub-category with an picture, and its name on a website. Magento has a awesome function which allows you to determine an picture to a classification, but doesn't provide you with a way to make that appear in a record somewhere.

magento developer · February 27, 2013 at 4:23 am

One function that I discovered was not designed in was a way to demonstrate each sub-category with an picture, and its name on a website. Magento has a awesome function which allows you to determine an picture to a classification, but doesn't provide you with a way to make that appear in a record somewhere.

Knox Nguyen · August 5, 2013 at 5:52 am

This did worked completely fine for me, just looking for what to do if a parent category id is required? This can be done through the same process with some code or will it required to go through the long process?

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Web

Angular JS Magazine on Flipboard

I have been working with AngularJS for about a year now, trying to learn as much as I can about this growing framework. It’s been a wild ride and I’m going to post a summary Read more…

GruntJS

My First GruntJS Plugin: Bust My Cache

GruntJS is a JavaScript Task runner that has been around for about 2+ year, at least as far as I can remember. I started playing around with GruntJS which uses Node.js about a year ago, Read more…

Top 5

Top 5 Articles : Week of November 25

During the the week of November 25th, I really started to dive into Angular JS. My top 5 articles of the week are mainly about AngularJS, an MVC framework by Google. #1 : AngularJS WebInspector Read more…