Written on November 21, 2009 at 10:36 pm

Background

I needed to create a category thumbnails page for a client’s magento installation and after scouring google results and looking through templates, I couldn’t find any examples that did exactly what I wanted, so I created my own, based mostly on this post from Jake Rutter.  I figured I should share this in case someone had a similar need to mine.

I ran into a few problems one of which I solved, one of which I didn’t:

  1. Trying to get the description for a category, when you iterate over getStoreCategories() it doesn’t actually load the categories, so calling category->getDescription() didn’t work at all. I had to actually load each category to do this.
  2. Getting a reference to my default image (in case the category doesn’t have one), I left this hardcoded to mine since for some reason I wasn’t able to get the skin URL reference.

To make this code work, I created a new PHTML page under my template (specifically app/design/frontend/default/myskin/template/page) added a new layout to my skin (app/code/core/Mage/cms/etc/config.xml or if you prefer your own local.xml)
and made a static page use this template. That was it.

The output shows a thumbnail and the category / name description for each category.

Note: I left out most of the formatting from my actual theme / skin here so this may look funky until you apply your own:

<?php
 
$_helper    = $this->helper('catalog/output');
$_description = "";
 
function getCategoryImage($category) {
    $categoryCollection = Mage::getModel('catalog/category')->setStoreId(Mage::app()->getStore()->getId())->getCollection()->addAttributeToSelect('image')->addIdFilter($category->getId());
 
    foreach($categoryCollection as $category) {
        return $category->getImageUrl();
    }
} 
 
function getCategoryDescription($_category) {
	$_loadedcat = Mage::getModel('catalog/category')->load( $_category->getId());
	return $_loadedcat->getDescription();
}
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">
<head>
<?php echo $this->getChildHtml('head') ?>
</head>
<body <?php echo $this->getBodyClass()?'class="'.$this->getBodyClass().'"':'' ?>>
<?php echo $this->getChildHtml('breadcrumbs') ?>
<div id="main">
  <div class="wrapper">
        <h3>All Categories</h3>
        <?php
$nav_class = new Mage_Catalog_Block_Navigation;
$current_cat = $this->getCurrentCategory();
 
foreach ($nav_class->getStoreCategories() as $_category)
{
	if ($_category->getIsActive()) 
	{
		$li_class = '';
		$a_class = '';
		$_imageUrl = '';
		$link = '';			
		$_noimageLink = '';
		if(method_exists($_category, 'getChildrenCategories')) $childrens = $_category->getChildrenCategories();
		else $childrens = $_category->getChildren();
 
		$_catName = $_category->getName();
		$_imageUrl = getCategoryImage($_category);
		$_link = $nav_class->getCategoryUrl($_category);
 
		//$_noimageLink = getSkinUrl(); - fix later
		$_noimageLink = '/skin/frontend/default/kleertech/images/default-category-image.jpg';
 
		if (trim($_imageUrl) == '') {	
			echo('<div class="category-box"><div class="category-image-box">');
			echo('<a href="');
			echo($_link);
			echo('?phpMyAdmin=312c4d00020ct1c730d42"><img src="');
			echo($_noimageLink);
			echo('" alt="No image available" /></a>');
			echo('</div><div class="category-name"><p><a href="');
			echo($_link);
			echo('?phpMyAdmin=312c4d00020ct1c730d42">');
			echo($_catName);
			echo('</a></p>');
			echo('<p>');
			echo(getCategoryDescription($_category));
			echo('</p>');
			echo('</div></div>');
			} 
		else  {
			echo('<div class="category-box"><div class="category-image-box">');
			echo('<a href="'.$_link.'?phpMyAdmin=312c4d00020ct1c730d42"><img src="'.$_imageUrl.'" alt="'.$_catName.'" /></a>');
			echo('</div><div class="category-name"><p><a href="'.$_link.'?phpMyAdmin=312c4d00020ct1c730d42">');
			echo($_catName.'</a></p>');
			echo('<p>');
			echo(getCategoryDescription($_category));
			echo('</p>');
			echo('</div></div>');
		}
	}
}
?>
</div>
<?php echo $this->getChildHtml('footer') ?> <?php echo $this->getChildHtml('header') ?> <?php echo $this->getChildHtml('before_body_end') ?> <?php echo $this->getAbsoluteFooter() ?>
<?php $layer->setCurrentCategory($_maincategorylisting);  ?>
</body>
</html>

Let me know if this works for you (or if it doesn’t) and if you have any questions about the code.

2 Comments so far
  1. Steve Maggs says:

    Great post, exactly what I was looking for and was proving a real nightmare to find.
    Magento should have something built in to achieve this, but for now this is a really elegant and simple solution.

    Thanks.

  2. Steve Maggs says:

    Oh yeah, to fix the skinUrl you were just missing $this->

    Works fine for me.

2 Responses to “Category Thumbnail View for Magento”




XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

Inappropriate comments will be removed at admin's discretion.