Using category image on the nav menu?

[elo15e]

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

[gjh42]

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.

[Get Em Fast]

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.

[Get Em Fast]

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.

[gjh42]

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

                $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:

                $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']; 

[Get Em Fast]

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.

[Get Em Fast]

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.