How to get category thumbnails in navbar menus?

Question

I have been very happy so far with "Responsive Custom Menu", however it does not have the option to pull in thumbnail images for categories and subcategories on the menu. I was about to extend it by adding a getThumbnail call to the getter and renderers for this navbar, but ran into some issues where it did not construct the url properly.

It seems that the main files to modify would be app/code/local/WP/CustomMenu/Block/Navigation.php and perhaps app/design/frontend/default/default/template/webandpeople/custommenu/top.phtml.

Can anyone provide some specific modifications that would insert the thumbnails into the menu for further styling?

Additionally, I'm fine with modifying this extension directly to provide these thumbnails, but would there be a better method to extend an extension such as this so that updates are still tenable and likely still work?

EDIT:

It seems that this may hold some keys here to implementing this properly: http://www.h-o.nl/blog/using_category_images_in_your_magento_navigation/

Answer 1

Override the observer

            <page_block_html_topmenu_gethtml_before>
            <observers>                    
                <catalog_add_topmenu_items>
                    <type>disabled</type>
                </catalog_add_topmenu_items>
                <custom_catalog_add_topmenu_items>
                    <class>custom_catalog/observer</class>
                    <method>addCatalogToTopmenuItems</method>
                </custom_catalog_add_topmenu_items>                    
            </observers>
        </page_block_html_topmenu_gethtml_before>           

Then in your observer, these three function. Modify to your needs.

    /**
 * Adds catalog categories to top menu
 *
 * @param Varien_Event_Observer $observer
 */
public function addCatalogToTopmenuItems(Varien_Event_Observer $observer)
{
    $block = $observer->getEvent()->getBlock();
    $block->addCacheTag(Mage_Catalog_Model_Category::CACHE_TAG);
    $this->_addCategoriesToMenu(
        Mage::helper('catalog/category')->getStoreCategories(), $observer->getMenu(), $block, true
    );
}

/**
 * Recursively adds categories to top menu
 *
 * @param Varien_Data_Tree_Node_Collection|array $categories
 * @param Varien_Data_Tree_Node $parentCategoryNode
 * @param Mage_Page_Block_Html_Topmenu $menuBlock
 * @param bool $addTags
 */
protected function _addCategoriesToMenu($categories, $parentCategoryNode, $menuBlock, $addTags = false)
{
    $categoryModel = Mage::getModel('catalog/category');
    foreach ($categories as $category) {
        if (!$category->getIsActive()) {
            continue;
        }

        $nodeId = 'category-node-' . $category->getId();

        $categoryModel->setId($category->getId());
        if ($addTags) {
            $menuBlock->addModelTags($categoryModel);
        }

        $tree = $parentCategoryNode->getTree();
        $categoryData = array(
            'name' => $category->getName(),
            'id' => $nodeId,
            'url' => Mage::helper('catalog/category')->getCategoryUrl($category),
            'is_active' => $this->_isActiveMenuCategory($category)
        );
        $categoryNode = new Varien_Data_Tree_Node($categoryData, 'id', $tree, $parentCategoryNode);
        $parentCategoryNode->addChild($categoryNode);

        $flatHelper = Mage::helper('catalog/category_flat');
        if ($flatHelper->isEnabled() && $flatHelper->isBuilt(true)) {
            $subcategories = (array)$category->getChildrenNodes();
        } else {
            $subcategories = $category->getChildren();
        }

        $this->_addCategoriesToMenu($subcategories, $categoryNode, $menuBlock, $addTags);
    }
}

/**
 * Checks whether category belongs to active category's path
 *
 * @param Varien_Data_Tree_Node $category
 * @return bool
 */
protected function _isActiveMenuCategory($category)
{
    $catalogLayer = Mage::getSingleton('catalog/layer');
    if (!$catalogLayer) {
        return false;
    }

    $currentCategory = $catalogLayer->getCurrentCategory();
    if (!$currentCategory) {
        return false;
    }

    $categoryPathIds = explode(',', $currentCategory->getPathInStore());
    return in_array($category->getId(), $categoryPathIds);
}   

Answer 2

Old thread but maybe this will someone help for magento menu. Did this for 1.9.2.2 but probably will work in older versions too.

In custom module config.xml file add this:

<frontend>
    <category>
        <collection>
            <attributes>
                <image />
            </attributes>
        </collection>
    </category>
<frontend>

Then override Mage/Catalog/Model/Observer.php function _addCategoriesToMenu() and add 'image' to array:

$categoryData = array(
    'name' => $category->getName(),
    'id' => $nodeId,
    'url' => Mage::helper('catalog/category')->getCategoryUrl($category),
    'is_active' => $this->_isActiveMenuCategory($category),
    'image' => $category->getImage()
);

Then you will be able to use image in template renderer.phtml file.

Answer 3

Its not too difficult, but keep in mind that Category Thumbnail images are not resized and served from size appropriate cache files the way product images are. So you'll want to upload properly sized images to keep your site fast. The code below should get you the image you're looking for.

$_helper = Mage::helper('catalog/category');
$_categories = $_helper->getStoreCategories();
 <?php foreach ($_categories as $_category): 
       $_categoryThumb = $_category->getThumbnail();
?>
<li>
    <a href="<?php echo $_helper->getCategoryUrl($_category) ?>">
        <img src="<?php echo $this->getUrl() . 'media/catalog/category/' . $_categoryThumb; ?>" alt="<?php echo $_category->getName()?>"/>
     <?php echo $_category->getName() ?>
     </a>
</li>

Answer 4

For Magento 1.9 + WP-CustomMenu this works without touching core files.

Create an extension and add this to your config.xml

<frontend>
    <category>
        <collection>
            <attributes>
                <image />
            </attributes>
        </collection>
    </category>
<frontend>

If flat categories are disabled, this should be enough to access $child->getImage() in WP_CustomMenu_Block_Navigation::drawMenuItem()

To make it work with flat tables add an observer to config.xml

<events>
    <catalog_category_flat_loadnodes_before>
        <observers>
            <add_category_attribute>
                <type>model</type>
                <class>[module]/observer</class>
                <method>addCategoryAttributes</method>
            </add_category_attribute>
        </observers>
    </catalog_category_flat_loadnodes_before>
</events>

Observer.php

public function addCategoryAttributes(Varien_Event_Observer $observer)
{
    $observer->getSelect()->columns(
        array('image')
    );
}

... and reindex category flat tables.

---

If you want to rewrite WP_CustomMenu_Block_Navigation you also have to rewrite WP_CustomMenu_Helper_Data::getMenuData()

Change:

$blockClassName = Mage::getConfig()->getBlockClassName('custommenu/navigation');
$block = new $blockClassName();

To:

$blockClassName = Mage::getConfig()->getBlockClassName('your/block');
$block = new $blockClassName();

---

^{How to get the rewritten blockname?}

Answer 5

This solution is for Magento -1.8.*

In Model file. (/app/code/core/Mage/Catalog/Model/Observer.php)

Update following code in Function Name: _addCategoriesToMenu

  $categoryData = array( 
        'name' => $category->getName(),
        'id' => $nodeId,
        'url' => Mage::helper('catalog/category')->getCategoryUrl($category),
        'is_active' => $this->_isActiveMenuCategory($category),
        'thumbnail' => Mage::getModel('catalog/category')->load($category->getId())->getThumbnail()

    );

Then go into Html folder. (app/code/core/Mage/Page/Block/Html/Topmenu.php)

Update the following line of code at line 128 in

Function name: _getHtml

        $urls = Mage::getBaseUrl('media').'catalog/category/'.$child->getData('thumbnail');
        $img = '<img src="'.$urls.'" />';

    $html .= '<li ' . $this->_getRenderedMenuItemAttributes($child) . '>';
    $html .= '<a href="' . $child->getUrl() . '" ' . $outermostClassCode . '><span>'
        . $this->escapeHtml($child->getName()) . ' </span> '.$img.' </a>';