How to create Categories Grid (list) with images

Last modified by HPMnick on Mon, January 10, 2011 16:41
Source|Old Revisions  

This is an old revision of the document!

How to create Categories Grid (list) with images

Hi, the firs is search the path:


in this path, we will create a file call “category_listing.phtml” without the quotes obviously.

This file will have the following code:

  1. <?php $_maincategorylisting=$this->getCurrentCategory()?>
  2. <?php $_categories=$this->getCurrentChildCategories()?>
  3. <h2><?php echo $this->__('Browse Products') ?> </h2>
  4. <div class="subcat-listing">
  5. <ul class="subcat-products">
  6. <? foreach ($_categories as $_category):?>
  7. <? if($_category->getIsActive()): ?>
  8. <?php $cur_category=Mage::getModel('catalog/category')->load($_category->getId()); ?>
  9. <?php $layer = Mage::getSingleton('catalog/layer'); ?>
  10. <?php $layer->setCurrentCategory($cur_category); ?>
  11. <? if($_imageUrl=$this->getCurrentCategory()->getImageUrl()):?>
  12. <li> <a href="<?php echo $this->getCategoryUrl($_category) ?>" title="<?php echo $this->htmlEscape($_category->getName()) ?>">
  13. <img src="<?php echo $_imageUrl ?>" width="auto" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" />
  14. </a>
  15. <h3><?php echo $this->htmlEscape($_category->getName()) ?></h3>
  16. <? if($_description=$this->getCurrentCategory()->getDescription()):?>
  17. <p class="category-description">
  18. <?php echo $_description ?></</p>
  19. <?php endif; ?>
  20. <? endif; ?>
  21. <? endif; ?>
  22. <?php endforeach; ?>
  23. </ul>
  24. </div>

Well, get on the server, and go to the magento admin panel.

Go to the menu “CMS/Static block” and go to the link that says “create new block”

In this block we will call it the same way that the file is, “category Listing” and identifier “category_listing.” We put in “enabled” and “content” we put the following:


Now save your new block, and go to the menu “Catalog/Manage Categories”

Now we need find the categorie that we want to show the list with images. Select the categorie that you want, and in the tab “DISPLAY SETTINGS we set the next information:

DISPLAY MODE: just STATIC BLOCK CMS Block: Category Listing (the block that we create before) Is Anchor: NO

and now, “SAVE”. Remember that in the tab “Custom Design” you need select your template.

Well. Go to the fronted fo your store and link in the categorie that you custom before.

PS: remember insert a imagen in the categorie when you create this.