Magento: Custom Category Images Listing Block Tutorial

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

<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>

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!

Comments

Tim Pearson
Reply

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

Regards
Tim Pearson

Daniel
Reply

Very nice work you did there!!

Maugan
Reply

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
Reply

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
Reply

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
Reply

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

David Rojas
Reply

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
Reply

Thanks a lot…!!! works like a charm :-)

gast
Reply

Excellent!! Thxs a lot!

David
Reply

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
Reply

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

Manan
Reply

Thanks David

Nuno
Reply

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

thecybertouch
Reply

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
Reply

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

thaddeusmt
Reply

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
Reply

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
Reply

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
Reply

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

Brian
Reply

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

Brian
Reply

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
Reply

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

Mark
Reply

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
Reply

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
Reply

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

Help please! thx Max

Max
Reply

found the error. line 8 must be:

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

khaliq
Reply

but i get Parse error

Alex
Reply

How can I display the categories horizontol?

THX

Alex

rumblepup
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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 \magento\app\code\Mage\Catalog\Model\Resource\Eav\Mysql4\Category.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
Reply

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
Reply

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
Reply

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
Reply

Ooohps… this is the source:

Small

Mark
Reply

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

stephan
Reply

mark,

go to \magento\app\code\Mage\Catalog\Model\Resource\Eav\Mysql4\Category.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
Reply

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
Reply

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
Reply

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:

\magento\app\code\core\Mage\Catalog\Model\Resource\Eav\Mysql4\Category.php

and dont forget to refresh ur cache in magento admin

Hope this works for u.

Chris
Reply

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
Reply

Hi Stephan,

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

Thanks
Mark

stephan
Reply

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
Reply

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
Reply

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
Reply

Magento ver is 1.1.8. can anybody help?

Mark
Reply

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
Reply

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
Reply

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
Reply

or just echo $_imgHtml ;

DeadlyPorpoise
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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

nikl
Reply

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

nikl
Reply

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
Reply

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

Scott
Reply

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
Reply

Thanks! That solved the problem!!

Colin
Reply

Yes! That solved my problem too.

Patrick Konsor
Reply

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
Reply

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
Reply

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
Reply

remember to change favicon :)

Marc
Reply

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.

Marc
Reply

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
Reply

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
Reply

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

biglittleWolf
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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

sven
Reply

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
Reply

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.

Wildwood
Reply

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
Reply

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
Reply

Can anybody help me how to show it vertically ?

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

yoostore
Reply

Can anybody help me how to show it horizontally ?

choussamaster
Reply

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

Kathy
Reply

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
Reply

I have problem in 1.4 ..any?

Rana Shuja
Reply

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
Reply

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
Reply

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
Reply

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

Traci Kaspar
Reply

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

rolo
Reply

Can I do it horizontal?

Wedding Photography
Reply

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
Reply

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

DJOneR
Reply

Brilliant — thanks a lot dude!

Adrian
Reply

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
Reply

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

devi
Reply

same pblm for me also its showing blank page

Alex
Reply

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
Reply

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

rolo
Reply

It's posible view the categories in horinzontal?

mRko
Reply

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.

Brady
Reply

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

wellsee
Reply

i'm using 1.4.1.1 and there is nothing showing there

Mike
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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

Mike
Reply

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
Reply

Does this work on version 1.3.4?

Richard
Reply

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
Reply

Can any one provide the exact step for displaying in horizontally

ucef pro
Reply

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
Reply

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
Reply

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
Reply

Anyone already got the horizontal grid working?

@ronhof
Reply

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
Reply

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
Reply

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
Reply

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!

Praful
Reply

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
Reply

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
Reply

Thanks. It worked great!

Glenn
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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
Reply

I deleted these two lines but still no luck :(

Rolf
Reply

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
Reply

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
Reply

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
Reply

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

Guenther Bosch
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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
Reply

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