How to create Categories Grid (list) with images

Last modified by Meth0 on Tue, August 14, 2012 19:42
Source|Old Revisions  

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>
  25. <?php $layer->setCurrentCategory($_maincategorylisting); ?>

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:

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

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.