Simple Call to Get Category Images & Display in List

Question

I'm displaying a list of sub categories by parent category ID and am wanting to display the category image in place of a category name.

Here is what I have so far...

<div id="menu_brands">
<div class="brand_head">
    <h3><?php echo $this->__('Browse By Brand') ?></h3>
</div>
<div class="brand_list">
    <?php
        $cats = Mage::getModel('catalog/category')->load(6)->getChildren();
        $catIds = explode(',',$cats);

        $categories = array();
            foreach($catIds as $catId) {
                $category = Mage::getModel('catalog/category')->load($catId); 
                $categories[$category->getName()] = $category->getUrl();
                $img = $category->getImageUrl(); //I suspect this line is wrong
        }

        ksort($categories, SORT_STRING);
    ?>

        <ul>
            <?php foreach($categories as $name => $url): ?>
                <li>
                    <!--<a href="<?php echo $url; ?>"><?php echo $name; ?></a>-->
                    <a href="<?php echo $url; ?>" title="<?php echo $name; ?>">
                        <img src="<?php echo $img; ?>" width="auto" alt="<?php echo $name; ?>" /> <!--I suspect this line is wrong-->
                    </a>
                </li>
            <?php endforeach; ?>
        </ul>
</div>
</div>

I've tried countless ways to display the images in place of the category names but nothing seems to make the images appear. Currently with the above, the output is an empty 'img src' so there is clearly an error with what I'm trying (and probably a better way of achieving what I'm after).

Please could someone kindly point out what the problem is?

If it's of any relevance, what I intend to do afterwards is then display the category images in a grid format (3 or 4 per line).

Many thanks in advance.

Answer 1

We managed to resolve this ourselves - see fix below.

<?php
    //gets all sub categories of parent category 'Brands'
    $cats = Mage::getModel('catalog/category')->load(6)->getChildren();
    $catIds = explode(',',$cats);

    $categories = array();
    foreach($catIds as $catId) {
        $category = Mage::getModel('catalog/category')->load($catId); 
        $categories[$category->getName()] = array(
            'url' => $category->getUrl(),
            'img' => $category->getImageUrl()
        );
    }

    ksort($categories, SORT_STRING);
?>
    <ul>
        <?php foreach($categories as $name => $data): ?>
            <li>
                <a href="<?php echo $data['url']; ?>" title="<?php echo $name; ?>">
                    <img class="cat-image" src="<?php echo $data['img']; ?>" />
                </a>
            </li>   
        <?php endforeach; ?>
    </ul>

Surprised we didn't get more support on this with it being a relatively simple Magento issue. Thanks B00MER for your answer though.