Image in Navigation Menu

Hey guys, attempting to replicate something I saw on http://www.ambientlounge.co.uk - if you hover over their bean bag navigation link, you’ll see they have an image that appears as you move your mouse over each different product.



I am attempting to create something similar right now. On Ambient Lounge, they’ve done the following:

• attached a unique ID to each
• element, which is the name of the product without spaces (ex. bean-bag-1)
  
• increased the navigation column count to allow space for the images
  
• wrote a simple jQuery script to change the image on rollover
  
  
  
  I don’t need anything quite as intricate as this; I just need to load the Category image (already enabled and uploaded to both of my targeted categories) to the right of my navigation bars, which have already been expanded from 3 columns to 5 columns to account for this extra space. My issue is that I am using the following code to load in the images without any luck:
  
  
  

<br />
		    {if $category_data.main_pair}<br />
		    <div class="categories-image" style="float:right; height:auto; width:150px;"><br />
		    {include file="common/image.tpl" show_detailed_link=true images=$category_data.main_pair object_type="detailed_category" no_ids=true class="cm-thumbnails" show_thumbnail="Y" image_width=$settings.Thumbnails.category_details_thumbnail_width image_height=$settings.Thumbnails.category_details_thumbnail_height}<br />
		    </div><br />
		  {/if}<br />

```<br />
<br />
If I manually enter the link for an image, it works without issue, so it must be something with this script... any ideas?? <img src="upload://rA9Qa8gnUPZzRZRdI8kt3dpjkrs.png" class="bbc_emoticon" alt=":)">

Hello,



What version of cscart are you using?



For cscart 4 a quick solution is to use the category description to upload a picture and then show it by using the my_changes addon to get the content.



Go to the app/addons/my_changes folder and add the file func.php.

Open the file and paste the following code:

```php

function fn_my_changes_get_category_desc($category_id = 0, $lang_code = CART_LANGUAGE){
if (!empty($category_id)) {
return db_get_field("SELECT description FROM ?:category_descriptions WHERE category_id = ?i AND lang_code = ?s", $category_id, $lang_code);
}
return false;
} ```

This will get you the description wherever you need.
Don't forget to activate the My Changes addon from the administrator interface.

Now you go to the design/themes/[your_theme]/templates and edit the file topmenu_dropdown.tpl.

After the line:
```php
{foreach from=$items item="item1" name="item1"}
```
You can use:
```php {assign var="cat_description" value=$item1.category_id|fn_my_changes_get_category_desc} ```

To show it use:
```php {$cat_description nofilter} ```

In your case:
```php
{if $cat_description|trim}

{/if}
```
Refrain from using inline css.
Add a stylesheet or go to design/themes/[your_theme]/css edit style.css with:
```php
.categories-images{
float: right;
height: auto;
width: 150px;
}
```

Please note that this is a quick fix. For a better implementation of this solution you should create an addon that has a field for the picture in the administration area and use hooks to insert it into the dropdown menu.

The end result should look similar to this menu:
[url="http://www.cscartdemo.energothemes.com/"]http://www.cscartdem...ergothemes.com/[/url]

If you have reactivated the category images like in this link:

http://forum.cs-cart…en-removed-why/



[color=#282828][font=arial, verdana, tahoma, sans-serif]Go to the design/themes/[your_theme]/templates and edit the file topmenu_dropdown.tpl.[/font][/color]



[color=#282828][font=arial, verdana, tahoma, sans-serif]After the line:[/font][/color]

[color=#282828][font=arial, verdana, tahoma, sans-serif]
{foreach from=$items item="item1" name="item1"}
[/font][/color]



Insert:

{assign var="cat_image" value=$item1.category_id|fn_get_image_pairs:'category':'M':true:true}



And use this code to display it:

```php

{if $cat_image.pair_id}

{/if}
```

Without the IF statement it will show the "no-image" image.

energothemes, thank you! This is some brilliant code, and the 2 different methods are both very helpful in their own respect, I didn’t know you could use the Category description to product something like this, very clever

[quote name=‘energothemes’ timestamp=‘1383245091’ post=‘170748’]

Hello,



What version of cscart are you using?



For cscart 4 a quick solution is to use the category description to upload a picture and then show it by using the my_changes addon to get the content.



Go to the app/addons/my_changes folder and add the file func.php.

Open the file and paste the following code:

<br />
<?php<br />
<br />
function fn_my_changes_get_category_desc($category_id = 0, $lang_code = CART_LANGUAGE){<br />
   if (!empty($category_id)) {<br />
	  return db_get_field("SELECT description FROM ?:category_descriptions WHERE category_id = ?i AND lang_code = ?s", $category_id, $lang_code);<br />
   }<br />
   return false;<br />
}
```<br />
<br />
This will get you the description wherever you need.<br />
Don't forget to activate the My Changes addon from the administrator interface.<br />
<br />
Now you go to the design/themes/[your_theme]/templates and edit the file topmenu_dropdown.tpl.<br />
<br />
After the line:<br />
```php
<br />
{foreach from=$items item="item1" name="item1"}<br />

```<br />
You can use:<br />
```php
{assign var="cat_description" value=$item1.category_id|fn_my_changes_get_category_desc} 
```<br />
<br />
To show it use:<br />
```php
{$cat_description nofilter}
```<br />
<br />
In your case:<br />
```php
<br />
{if $cat_description|trim}<br />
   <div class="categories-image"><br />
	  {$cat_description nofilter}<br />
   </div><br />
{/if}<br />

```<br />
Refrain from using inline css.<br />
Add a stylesheet or go to design/themes/[your_theme]/css edit style.css with:<br />
```php
<br />
.categories-images{<br />
   float: right;<br />
   height: auto;<br />
   width: 150px;<br />
}<br />

```<br />
<br />
Please note that this is a quick fix. For a better implementation of this solution you should create an addon that has a field for the picture in the administration area and use hooks to insert it into the dropdown menu.<br />
<br />
The end result should look similar to this menu:<br />
[url="http://www.cscartdemo.energothemes.com/"]http://www.cscartdem...ergothemes.com/[/url]<br />
[/quote]<br />
<br />
Why I don't have [color=#282828][font=arial, verdana, tahoma, sans-serif]topmenu_dropdown.tpl file in [/font][/color][color=#282828][font=arial, verdana, tahoma, sans-serif] [/font][/color][color=#282828][font=arial, verdana, tahoma, sans-serif]design/themes/basic/templates folder. (v4.0.3) <img src="upload://nMBtKsE7kuDHGvTX96IWpBt1rTb.gif" class="bbc_emoticon" alt=":-(">[/font][/color]

How can i display the image (where to insert the code) of the category in the bottom-right position like this one.

On version 4.1.1 your code display the image above the menu. Any ideea how can i fix that ?

[quote name='energothemes' timestamp='1383245091' post='170748']

Hello,



What version of cscart are you using?



For cscart 4 a quick solution is to use the category description to upload a picture and then show it by using the my_changes addon to get the content.



Go to the app/addons/my_changes folder and add the file func.php.

Open the file and paste the following code:

```php

function fn_my_changes_get_category_desc($category_id = 0, $lang_code = CART_LANGUAGE){
if (!empty($category_id)) {
return db_get_field("SELECT description FROM ?:category_descriptions WHERE category_id = ?i AND lang_code = ?s", $category_id, $lang_code);
}
return false;
} ```

This will get you the description wherever you need.
Don't forget to activate the My Changes addon from the administrator interface.

Now you go to the design/themes/[your_theme]/templates and edit the file topmenu_dropdown.tpl.

After the line:
```php
{foreach from=$items item="item1" name="item1"}
```
You can use:
```php {assign var="cat_description" value=$item1.category_id|fn_my_changes_get_category_desc} ```

To show it use:
```php {$cat_description nofilter} ```

In your case:
```php
{if $cat_description|trim}

{/if}
```
Refrain from using inline css.
Add a stylesheet or go to design/themes/[your_theme]/css edit style.css with:
```php
.categories-images{
float: right;
height: auto;
width: 150px;
}
```

Please note that this is a quick fix. For a better implementation of this solution you should create an addon that has a field for the picture in the administration area and use hooks to insert it into the dropdown menu.

The end result should look similar to this menu:
[url="http://www.cscartdemo.energothemes.com/"]http://www.cscartdem...ergothemes.com/[/url]
[/quote]

design/themes/basic/templates/blocks/topmenu_dropdown.tpl

[quote name='energothemes' timestamp='1383245091' post='170748'] Hello, What version of cscart are you using? For cscart 4 a quick solution is to use the category description to upload a picture and then show it by using the my_changes addon to get the content. Go to the app/addons/my_changes folder and add the file func.php. Open the file and paste the following code: {$cat_description nofilter} {/if} Refrain from using inline css. Add a stylesheet or go to design/themes/[your_theme]/css edit style.css with: .categories-images{ float: right; height: auto; width: 150px; } Please note that this is a quick fix. For a better implementation of this solution you should create an addon that has a field for the picture in the administration area and use hooks to insert it into the dropdown menu. The end result should look similar to this menu: http://www.cscartdem…ergothemes.com/ [/quote]



Hi, Sorry to bring you guys back. I have done all the necessary but the category image is not showing in the top_menu. The only thing I didn't do is the myaddon changes because wasn't clear. In your script it was category_description that was being called. I need to know if the description comprises of the 'description' and 'cat image'…Please throw more light please

Hello energothemes



I need same help for 306 sidebox_dropdown, left side menu with image how can do it? v4 very difrent for 306



Thanks

hii all

after adding code for image on menu block the output it is showing is

http://prntscr.com/eyk9uw

but i want

http://prntscr.com/eyk9y2- this one

when i am adding categories through menu the images are not visible in topmenu dropdown
http://prntscr.com/gucjjg

anyone know what is the issue behind this

Looks like issue is 3rd party theme related. Please contact theme developers