how to display image in dropdown menu in magento without using any plugins [closed]

Question

In Magento i have added categories and subcategories,these will be displayed in home page of my website.

Now, I want to display subcategories along with respective image. But I do not want to use any extensions provided by Magento.

Below snapshot shows how my dropdown menu looks, but i want to add image to respective category.

This is the code which i have added in renderer.phtml app/design/frontend/rwd/default/template/page/html/topmenu

<?php

$html = '';

$children = $menuTree->getChildren();
$parentLevel = $menuTree->getLevel();
$childLevel = is_null($parentLevel) ? 0 : $parentLevel + 1;

$counter = 1;
$childrenCount = $children->count();

$parentPositionClass = $menuTree->getPositionClass();
$itemPositionClassPrefix = $parentPositionClass ? $parentPositionClass . '-' : 'nav-';

foreach ($children as $child) {
    $child->setLevel($childLevel);
    $child->setIsFirst($counter == 1);
    $child->setIsLast($counter == $childrenCount);
    $child->setPositionClass($itemPositionClassPrefix . $counter);

    $outermostClassCode = 'level'. $childLevel;
    $_hasChildren = ($child->hasChildren()) ? 'has-children' : '';

    $html .= '<li '. $this->_getRenderedMenuItemAttributes($child) .'>';

    $html .= '<a href="'. $child->getUrl() .'" class="'. $outermostClassCode .' '. $_hasChildren .'">'. $this->escapeHtml($this->__($child->getName())) .'</a>';

    if (!empty($childrenWrapClass)) {
        $html .= '<div class="'. $childrenWrapClass .'">';
    }

    $nextChildLevel = $childLevel + 1;

    if (!empty($_hasChildren)) {
        $html .= '<ul class="level'. $childLevel .'">';
        $html .=     '<li class="level'. $nextChildLevel .' view-all">';
        $html .=         '<a class="level'. $nextChildLevel .'" href="'. $child->getUrl() .'">';
        $html .=             $this->__('View All') . ' ' . $this->escapeHtml($this->__($child->getName()));
        $html .=         '</a>';
        $html .=     '</li>';
        $html .=     $this->render($child, $childrenWrapClass);
        $html .= '</ul>';
    }

    if (!empty($childrenWrapClass)) {
        $html .= '</div>';
    }

    $html .= '</li>';

    $counter++;
}

return $html;

and following code i have added in app/design/frontend/rwd/default/template/page/html/topmenu.phtml

<?php $_menu = $this->getHtml('level-top') ?>
<?php if($_menu): ?>
<nav id="nav">
    <ol class="nav-primary">
        <?php echo $_menu ?>
    </ol>
</nav>

<?php endif ?>

and also i have added following code in app/etc/modules/WP_customMenu.xml to display the category list in customized form

<?xml version="1.0"?>
<config>
    <modules>
        <WP_CustomMenu>
            <active>true</active>
            <codePool>community</codePool>
        </WP_CustomMenu>
    </modules>
</config>

Answer 1

you need to load category on your template. Either by factory method(as shown here) or in your block instantiation( {{block }} or xml block ). I hope this code snippet will help.

$_helper    = $this->helper('catalog/output');
$_category  = Mage::getModel('catalog/category)->load(CATEGORYID);// get your category here.
$_imgHtml   = '';
if ($_imgUrl = $_category->getImageUrl()) {
    $_imgHtml = '<p class="category-image"><img src="'.$_imgUrl.'" alt="'.$this->htmlEscape($_category->getName()).'" title="'.$this->htmlEscape($_category->getName()).'" /></p>';
    $_imgHtml = $_helper->categoryAttribute($_category, $_imgHtml, 'image');
    echo $_imgHtml;
}

Answer 2

You need exactly what I've done. I built this for root category but same approach will be used for sub-categories.

Look here since it's same question: How to get a category thumbnail or Image?

Look for my answer.

Answer 3

Go to magento admin panel, and navigate to Catalog->manage categories->and click category which is needed and note down the ID of the required category for ex: lets take ID of adventure as :2796

Now, go to cms->static block> Add New Block

Block Title *:wp_custom_menu_2796 Identifier *:wp_custom_menu_2796 Store View *: required view Status *: enabled Content *:

2796 is the category id