Using category image on the nav menu?

Hi,

Is there a way to use the category images on the menu? Either on the navmenu or the categories sidebar? I would love to be able to do this. I am using using: v1.3.9d of Zen cart.

Many thanks in advance,

Claire

Clare,

You can do it relatively easily if you want to change your zencart database!

I accept absolutely no responsibility for you totally trashing your website if you decide to follow these instructions!!!

Open up your mySQL database software (usually phpMyAdmin).
Edit the table named categories_description
Change the categories_name field to be 128 or 256 characters long (instead of the default 32)

Next...

Edit one of your categories in ZenCart Admin
In the 'category name' box, put a standard HTML img tag before the name of your category.
eg. Category Name: <img src="/images/categories/danceShoes.jpg">Dance Shoes

You can also stick a similar img tag into the 'page title' of your EZPages to get images to appear there. (I don't think you need to make the database change for this to work.)

If you want to use the category image set in admin with the categories sidebox, you can add its display just by invoking $box_categories_array[$i]['image']. This contains the filepath of the current category's image, and you can insert it where you like in /includes/templates/your_template/sideboxes/tpl_categories.php.

If you want to substitute an image of your choice for the category name, you can use Categories Dressing from Free Addons. It is also built to allow hover effects on the image.

Aha! Thank you very much for replying.

I found the $box_categories_array call in the categories php. I'm a little curious to see if I can find where that array is defined - perhaps I could add an Image2 into the database and use that as a hover over image.

However - I shall take a look at the Categories Dressing from Free Addons, because that may save me a lot of bother.

I'm always up for a bit of database trashing thou! :D

Thanks again!

Claire

If you want the hover, Cat Dressing will save you a bunch of work. Just use the "background image" instructions in the readme.

OK - I've installed that - it's a lot of fun - thanks for the recommendation!

I'm still struggling to get the hover over working, so that I get independent ones for different categories. I'll keep at it thou :)

Thanks!

Claire

Study the "To display images in place of selected category names:" section of the readme, especially the parts that refer to catBG or catbg.

Thank you gjh42 - you're a big help!

I'm wondering if you know what the

categories li A.catBg1:hover

css will actually affect - I would love it to change my categories headers on hovering :) I'm getting the feeling it may not.

Claire

If you have images named catbg#.gif and catbg#hover.gif (where # is the cPath of the category), the code will be ready to use the images replacing that category's name. If you also add to your stylesheet

#categories li a.catBg# {background-image: url(../buttons/english/catbg#.gif);}
#categories li a.catBg#:hover {background-image: url(../buttons/english/catbg#hover.gif);}

you will get the hover effect.
You need a set of these for each category where you want to have an image hover effect.

Hey Glenn, I've been wondering about putting Category images in my CSS Flyout Menu..........exactly what would I have to do to call them into it, as using the above example didn't seem to work at all for this particular menu.

Well, I've got it narrowed down.........I think. With this menu, the code has to be put into the includes/classes/categories_ul_generator.php

I found code to call to the database for the Category images, gathered from includes/functions/functions_lookups.php

I also found code to display the images from includes/templates/CUSTOM/templates/tpl_modules_category_icon_display.php

So with these codes in there I get images.........but EVERY one of them is the "No Image" image. But no matter what I do, it won't display the correct Category icon.

Maybe somebody can tell me what's wrong here?

<?php
//placeholder21// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce                                       |
// +----------------------------------------------------------------------+
// | Copyright(c) 2003 The zen-cart developers                           |
// |                                                                      |
// | http://www.zen-cart.com/index.php                                    |
// |                                                                      |
// | Portions Copyright(c) 2003 osCommerce                               |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license,       |
// | that is bundled with this package in the file LICENSE, and is        |
// | available through the world-wide-web at the following url:           |
// | http://www.zen-cart.com/license/2_0.txt.                             |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to       |
// | [email protected] so we can mail you a copy immediately.          |
// +----------------------------------------------------------------------+
// $Id: categories_ul_generator.php 2004-07-11  DrByteZen $
//      based on site_map.php v1.0.1 by networkdad 2004-06-04
//

class zen_categories_ul_generator {
    var $root_category_id = 0,
    $max_level = 0,
    $data = array(),
    $parent_group_start_string = '<ul%s>',
    $parent_group_end_string = '</ul>',
    $child_start_string = '<li%s>',
    $child_end_string = '</li>',
    $spacer_string = '
',
    $spacer_multiplier = 1;
    
    var $document_types_list = ' (3) ';
    // acceptable format example: ' (3, 4, 9, 22, 18) '    

/*
 * Return category's image
 * TABLES: categories
 */
  function zen_get_categories_image($what_am_i) {
    global $db;

    $the_categories_image_query= "select categories_image from " . TABLE_CATEGORIES . " where categories_id= '" . $what_am_i . "'";
    $the_products_category = $db->Execute($the_categories_image_query);

    return $the_products_category->fields['categories_image'];
  }

    
    function zen_categories_ul_generator($load_from_database = true)
    {
        global $languages_id, $db;
        $this->data = array();
        $categories_query = "select c.categories_id, cd.categories_name, c.parent_id, c.categories_image
                                        from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd, " . TABLE_PRODUCT_TYPES_TO_CATEGORY . " ptc
                                        where c.categories_id = cd.categories_id
                                        and c.categories_status=1 " .
                                        " and cd.language_id = '" . (int)$_SESSION['languages_id'] . "' " .
                                        " order by c.parent_id, c.sort_order, cd.categories_name";
        $categories = $db->Execute($categories_query);
        while (!$categories->EOF) {
            $this->data[$categories->fields['parent_id']][$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'], 'count' => 0);
            $categories->MoveNext();
        }
    }    

    
    function buildBranch($parent_id, $level, $submenu=true, $parent_link='')
    {
        $result = sprintf($this->parent_group_start_string, ($submenu==true) ? ' class="level'. ($level+1) . '"' : '' );
        
        if (($this->data[$parent_id])) {
            foreach($this->data[$parent_id] as $category_id => $category) {
                $category_link = $parent_link . $category_id;
                if (($this->data[$category_id])) {
                    $result .= sprintf($this->child_start_string, ($submenu==true) ? ' class="submenu"' : '');
                } else {
                    $result .= sprintf($this->child_start_string, '');
                }
                $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * 1) . '<a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">' . zen_image(DIR_WS_IMAGES . zen_get_categories_image(zen_get_products_category_id((int)$_GET['products_id'])),zen_get_categories_name(zen_get_products_category_id((int)$_GET['products_id']), $_SESSION['languages_id']), CATEGORY_ICON_IMAGE_WIDTH, CATEGORY_ICON_IMAGE_HEIGHT);
                $result .= $category['name'];
                $result .= '</a>';
                  
                if (($this->data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level+1))) {
                    $result .= $this->buildBranch($category_id, $level+1, $submenu, $category_link . '_');
                }
                $result .= $this->child_end_string;
            }
        }
        
        $result .= $this->parent_group_end_string;
        return $result;
    }
    
    function buildTree($submenu=false)
    {
        return $this->buildBranch($this->root_category_id, '', $submenu);
    }
}
?>

This is on a test site, but it IS live, so I can give you the url, if anybody wants to look at the results as of right now.

The original version of that file has only one piece of data per category to put into the $data array:

$this->data[$categories->fields['parent_id']][$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'], 'count' => 0);

I think this is where you want to add the image field.

$this->data[$categories->fields['parent_id']][$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'], 'count' => 0, 'image' => $categories->fields['categories_image']);

Then you can retrieve $this->data['parent_id']['categories_id']['image'] later. I believe it will show up in the build_branch() function as $category['image'], analogous to $category['name'].

foreach($this->data[$parent_id] as $category_id => $category)

The original has```php
$result .= str_repeat($this->spacer_string, $this->spacer_multiplier * 1) . '<a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">';
$result .= $category['name'];

Maybe something like this:
```php
                $result .= str_repeat($this->spacer_string, $this->spacer_multiplier * 1) . '<a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">';
                $result .= zen_image(DIR_WS_IMAGES . $category['image'], $category['name'], CATEGORY_ICON_IMAGE_WIDTH, CATEGORY_ICON_IMAGE_HEIGHT);
                $result .= $category['name'];

AH-HA!!!!! That's it! That's exactly what I've been looking for. Man, I was SOOOO close the exactly that a dozen times.............but not quite. You wouldn't believe how many times I was so close..........well, now that I see it............I can't either.

Anyway.........sending you a pm.

Well, I'm glad to know that I DID contribute to this little project, as it worked great on my site, but when added to the clients site, it was back to the old "No Image" image. So, I added the code in the above posts, and also had to add c.categories_image to the database query, as I had already added to mine. That done it. Worked like a charm on customers' site, as well........and looks very nice! I WILL include images on ALL levels, but he only wanted them on the Top level.