Parent category with image in a CMS page

by lsd / Filed under: For Web Designer, Magento Tutorial

Get Magento parent categories listing with image in a CMS page

A Magento project we were working, client wanted to show all parent categories with their respective images in a cms page, we did something similar before for other magento projects however they were called to a subcategory listing page by calling a CMS block from each parent category. Nevertheless, the way it works is very similar.

To do so, first create a phtml file, call it “category_listing.phtml”, place it in the catalog/navigation and insert below code to your file:

getCurrentCategory()?>
getCurrentChildCategories()?>

__('Browse Products') ?>





    getIsActive()): ?>
    load($_category->getId()); ?>

    setCurrentCategory($cur_category); ?>
    getCurrentCategory()->getImageUrl()):?>

  • <?php echo $this->htmlEscape($_category->getName()) ?>

    htmlEscape($_category->getName()) ?>


    getCurrentCategory()->getDescription()):?>









In the above code we called the category name, category image and category description (optional).

Now go to admin/CMS/Manage Pages and create a new CMS page, name it anything you like (e.g. categories-listing). In the Content area, enter the block type to call the “category_listing” template file :

{{block type="catalog/navigation" name="catalog.categories" template="catalog/navigation/category_listing.phtml"}}

Add Category Image

In this step simply add image in each parent category (1st level) at admin/Catgalog/Manage Categories and you are ready to go. As noted above, Description is optional, you can leave it blank if you prefer.

One small glitch: adding image (and description) in a parent category will also result the image (and description) show up in product listing page. If you don’t want this, in the catalog/category/view.phtml, look for div class name for image and description, then add them to your css file (e.g. boxes.css). In the default view.phtml, we see a class name for “category-description” is already added, but there isn’t one for image, in line #39 you see this:

$_imgHtml = ''.$this->htmlEscape($_category->getName()).'';

Simply add a “class=”category-img” somewhere in the above code.


/* use this only if you want to hide them from search engine and assistive UA */
.catalog-category-view p.category-description,
.catalog-category-view .category-img {dislay:none}
/* use this only if you want to show them for search engine and assistive UA */
.catalog-category-view p.category-description,
.catalog-category-view .category-img {position:absolute; text-indent:-33333px}

For your convenience, below is the CSS code we use for our client’s site that shows 3 categories listing in a row.

.subcat-listing ul li {float: left;width:33%;text-align: center;margin-top: 15px;}
.subcat-listing ul li img {margin: 0 auto;}
.subcat-listing ul li p {font-size: 1em;}

See it in action (note: site still under development, view it in Firefox please.)

Taking it further to hompage

Tip: If you wish to show categories listing on the homepage, simply paste the above block type code to your CMS homepage, if the homepage has already called the ‘new.phtml’ file, the ‘category_listing’ block will be placed above or below the new.phtml depending on where you placed the block. For more flexibility, you can do something like this:

  • Call a cms block within the ‘new.phtml’, put it somewhere you want the categories listing displays
    getLayout()->createBlock('cms/block')->setBlockId('homepage_products')->toHtml() ?>
  • Create a CMS Static Block, name the identifier “homepage_products”
  • Paste the same block type you placed to the CMS page in the static block you have just created

Credit goes to this thread : how to get category image url

Tags: category listing, cms page

One Comment to “ Parent category with image in a CMS page ”