Magento: Adding subcategory images to category pages

Magento category landing pages list all the products within that category, with sub category filters in the right hand side. They can also include content blocks such as a banner or other bespoke code at the top.

Magento Category Static Content Blocks

We originally added content blocks to the category pages of a client’s furniture website, which displayed a static image and text of each sub category. Whilst this served a purpose for about 12 months, as new ranges were introduced, we needed to add something that would update automatically.

Magento Category Dynamic Content Blocks

It would be better to display the images and description from the sub categories dynamically, so updating these in the cms would update the category pages. Here’s how to get your Magento category landing pages to dynamically display the images and descriptions of all subcategories.

Step 1 – Create a .phtml template file

Create a new Magento .phtml template file in the location below, using your own theme path.

\app\design\frontend\default\[theme_name]\template\catalog\category\sub.phtml

 

Step 2 – Choose which information to show

The php code below calls sub categories, that are enabled and in position order (position in the tree folder in Magento).

By changing the addAttributeToSelect array (line 12) and what you echo (line 36) e.g. echo $category->getMetaDescription(), you can display the category name, image, description, meta title and meta description.

Calling the meta description was useful for me, as the category description was already being used on the individual category page and the text was much too long.

<?php
/**
 * Sub Category images
 *
 * Needs code in static block {{block type="core/template" template="catalog/category/sub.phtml"}}
 */
?>

<?php
$category = Mage::getSingleton('catalog/layer')->getCurrentCategory();
$categories = $category->getCollection()
        //->addAttributeToSelect(array('name', 'image', 'description', 'meta_title'))
		->addAttributeToSelect(array('name', 'image', 'meta_description'))
        ->addAttributeToFilter('is_active', 1)
		->addAttributeToSort('position')
        ->addIdFilter($category->getChildren());

?>
<div class="subcategories">
    <?php foreach ($categories as $category): ?>
        <div class="span-1-3">
        	<h3><?php echo $category->getName() ?></h3>
            <div class="Collimg">
                <a title="<?php echo $category->getName() ?> furniture" href="<?php echo $category->getUrl() ?>">

                <?php $imageUrl = $category->getImageUrl() ?>

				<?php if (!empty($imageUrl)) { ?>
                	<img src="<?php echo $imageUrl ?>" alt="<?php echo $this->htmlEscape($category->getName()) ?>" />
                <?php } else { ?>
					<img src="<?php echo $this->getSkinUrl('images/media/collections/maddogsandenglishmen.jpg'); ?>" alt="<?php echo $this->htmlEscape($category->getName()) ?>" />
				<?php } ?>
                </a>

                <div class="toggletext">
                  <?php /*?><?php echo $category->getDescription() ?><?php */?>
                  <?php /*?><?php echo $category->getMetaTitle() ?><?php */?>
                  <div><?php echo $category->getMetaDescription() ?></div>
                </div>
            </div>
        </div>
    <?php endforeach; ?>
</div>

 

 

Step 3 – Add a new content block

In the Magento Admin go to;

CMS -> Static Blocks

And create a new block called;

Block Title = Subcategories

Identifier = subcategories

Status = Enabled

Content = {{block type=”core/template” template=”catalog/category/sub.phtml”}}

Step 4 – Display the content block from your categories

Next we need to select the categories which will show this content block. You can choose to show the block on its own (best when showing lots of subcategory sections) and the block with products (better if there are only a few subcategories).

Go to Catalog -> Manage Categories

Then select a category (list on the left)  that you’d like to display the sub category images on its landing page.

Find the Display Settings Tab and select to show your new block.

Display Mode = Static Block Only
CMS Block = subcategories

 

Step 5 – Make sure your subcategories have images and descriptions

If your content block has been set up properly and your subcategories have images, your category page should now look like this.

If not check that your subcategories all have images uploaded to them (Catalog -> Manage Categories ->General Information tab) and that you’ve flushed your Magento cache.

I’ve also added a backup image, to display if the subcategory page doesn’t have an image assigned. So you’ll need to change this for something of your own. I used a photo of the actual store front, but a logo or generic collection image will work.

 

Step 6 – Add your CSS

If your using Bootstrap, Foundation or another grid based framework, you’ll want to use your own css so that your images float correctly across all view points. Just switch out the classes in the html above to accommodate the units your framework uses.

Here’s the css used in the example, you just need to float each item and add a margin to space them out.

.Collrow::after{
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  overflow: hidden;
}

.Collrow {
  margin-bottom: 10px;
}


div.span-1-3, div.span-2-3, div.span-3-3, div.span-1-4, div.span-2-4, div.span-3-4, div.span-4-4 {
  float: left;
  margin-right: 10px;
}

.span-1-3 {
  width: 221px;
}

.last, div.last, .Collrow .span-1-3:nth-child(3) {
  margin-right: 0;
}

The css should be added to your main theme css (styles.css), or custom css stylesheet.

Magento Cache

To flush your Magento site’s cache;

Refresh Cache
System > Cache Management > Select All [check-boxes] > Actions = Refresh> Submit

 

Let me know in the comments if you’ve found this useful.