Using category image on the nav menu?

[elo15e]

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

[Celtic]

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.)

[gjh42]

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.

[elo15e]

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!

Thanks again!

Claire

[gjh42]

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

[elo15e]

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

[gjh42]

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

[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.