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!

Leave a Reply

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

    Regards
    Tim Pearson

  2. 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”>

  3. 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!!

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

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

  6. 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"}}

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

  8. 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?

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

  10. 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!

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

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

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

  14. 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”

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

  16. 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() ?>

  17. 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;
    }

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

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

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

  21. 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;
    }

  22. 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}}
    —————————

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

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

  25. Hi Stephan,

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

    Thanks
    Mark

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

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

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

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

  30. 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;
    }

  31. 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;

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

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

  34. 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;
    }

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

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

  37. 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!

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

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

  40. 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!

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

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

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

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

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

  46. 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?

  47. 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 ?

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

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

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

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

  52. 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)

  53. 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!

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

  55. Can anybody help me how to show it vertically ?

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

  56. 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!

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

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

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

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

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

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

  63. 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?

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

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

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

  67. 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?

  68. 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{
    }

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

  70. 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"}}

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

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

  73. 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;
    }

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

  75. 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!

  76. 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…

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

  78. 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.. !

  79. 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?

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

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

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

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

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

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

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

  87. 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!

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

  89. 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"

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

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

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

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

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

  95. 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?

  96. 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?