Howto add category thumbnails in 'menu block' ?

[Tito]

Hi

How can I add small 15x15 thumbnails in front of the category names in the 'menu module block' ?

Thx!

[Madrilene]

hello
i have the same need, and don't really how to do,
but my point of view is that there are some programmation to do taking the "provider" or "suplier" blocks as models. brief some colum should be add in the data base.
a another way could be if your thumbnails are the same as the category linked picture to add something in css file and add a line of code to insert and reduce the size the image in the right place forr you.
i'm sorry not to be able to give you a solution, but maybe some programmer will

[Melinda]

If you are referring to the category folders of each main category you can change the theme global.css style.
div#categories_block_left ul.tree li {
border:none;
padding-left:15px;
margin-left:0;
font-weight:bold;
font-size:12px;
line-height:13px;
margin-top:2px;
background-image: url(../img/bullet_alt.jpg);
background-position: left top;
}

This has an image of "none" in the default css but add your image to the theme's img folder and add it to that style. You can adjust your image in your graphics program to get it like you want.

Example:
http://www.designhosting.us/prestashop/

Hope this helps.

I would also change the "plus sign" image to the same image if you have sub-categories.

[Tito]

ok

But how can I put the 'category image' in the menu ?
Meaning : every category has its own thumbnail
(if I convert em manually to thumbnails...)

[Melinda]

I'm not sure I'm understanding. When you say "menu" are you talking about the names of the blocks or the names of the category folders?

Or are you saying you want different images for each category folder? If this is the case then I wouldn't know how to do that.

[Tito]

See quick preview picture in attachment for what I am looking for :

How can this be done pls

[nerdygurl]

You would probably need to create the css code to install various images for each catagorie resulting in a little bit of seperate code for each i know how to do this using zen cart but not prestashop i will have a look once i have finished playing with prestashop as i am currently just making my site now. If the css is like zen cart with come adjustments that code might be able to be applied to prestashop?? If not i will have a look and see what i can create for you as a solution.

[Melinda]

I looked around but I'm new to this and don't know how to add different images but is a nice idea.

Maybe you should post this in the feature list for the developers to take a look at. Send the picture also.

[Paul C]

Actually the category_id is passed to the template, so all you'd need are the thumbnail versions somewhere, and you can display the images referenced by category_id......

e.g. if the images were named /img/c/menu-thumb-1.jpg (where 1 == the category id)

Use smarty to add an image tag, by building the filename in /modules/blockcategories/category-tree-branch.tpl

i.e.

I think :cheese:

Paul

[Tito]

Indeed, thats a nice temporaly solution. Thx, Paul C, again

But auto-generating thumbnails from the category images would be easily implementable, not with a hook, but in the 'core'...

I'll post a request in the bugtracker, referencing this post.
Feel free to comment on it to make the request clear

[Paul C]

If you into Preferences-->Image you can create a new image size format for "category" images and it should do the resizing for you already! The only thing is that scaling images down as far as an icon may not produce ideal results, but it's worth a try.

Paul

[Tito]

Thx!!

Now,

How can I check if {$node.id}-mini-thumb.jpg exists ? Using Smarty ?
And replace it with $language-default-mini-thumb.jpg if it doesn't exists ?

something like :

src="{$img_cat_dir}en-{if $category.id_image}{$category.id_image}{else}default{/if}-mini-thumb.jpg"

but that code doesn't work yet...

[Tito]

SOLVED

[Madrilene]

Hi Tito and Paul
i read your posts, but i don't get something :
where should we put exactly the img scr...?
Because i open the category-tree-branch.tpl (in my theme) see that :

>
{$node.name|escape:'htmlall':'UTF-8'}
   {if $node.children|@count > 0}
</pre>
<ul>
       {foreach from=$node.children item=child name=categoryTreeBranch}
           {if $smarty.foreach.categoryTreeBranch.last}
                       {include file=$tpl_dir./category-tree-branch.tpl node=$child last='true'}
           {else}
                       {include file=$tpl_dir./category-tree-branch.tpl node=$child last='false'}
           {/if}
       {/foreach}
</ul>
<br>   {/if

where should i put the html code for image ?
(and last question, where should i store the dedicated pictures to each categories ?)
thank you very much

[Paul C]

That template is called recursively down through the menu "branches" so the anchor at the top is the bit that displays the link and category name. That's where the image would go i.e.

{$node.name|escape:'htmlall':'UTF-8'}

I think

Paul

[Madrilene]

Thank you, i try there (but in fact there seems not to have other places ;-)
and tell you.

for the picture is there a specific folder to put them in?

[Paul C]

they should really live in the /img/c directory. If you can get the cart to create them then you should (Preferences->Image and create a new format that's for example 15px x 15px)

Paul

[Madrilene]

Ok nice.

Then in the same way, would it be possible to display the tumbnail or picture of each manufaturer un front of their name in the manufacturer block ?

This point was not really solved in the french following post, but some idea were given :

http://www.prestashop.com/forums/viewthread/3576/developpement_et_graphisme/afficher_limage_par_defaut_quand_le_fabricant_na_pas_de_logo_

The solution was given for the display in the central zone, but not or the block, should the same lines of progammation be stuck but in other files than supplier and manufacturer.tpl ? If yes where ?

Thank you very much, i really appreciate the free help given by numerrous member in this forum as for my part and for the moment i'n not so helpfull and supportiv because o the lack of my knowledge !

[Paul C]

Madrilene, you'll see this in the top part of manufacturer.tpl:

getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}" title="{l s='More about' mod='blockmanufacturer'} {$manufacturer.name}">{$manufacturer.name}

I would change it to:

getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}" title="{l s='More about' mod='blockmanufacturer'} {$manufacturer.name}"> {$manufacturer.name}

You may need to add spaces etc. to get it to line up nicely though

Images are /img/m/menu-thumb-1.jpg, /img/m/menu-thumb-2.jpg etc. similar to the categories.

Paul

[Madrilene]

Thank's paul
i try and report (i hope it works :-)

[lionhell]

Chez moi le test conditionnel :

{if $subcategory.id_image}{$subcategory.id_image}

est toujours négatif et c'est défaut qui est toujours retenu.

Par contre si je le supprime et que je le remplace directement par

{$node.id}

ça fonctionne parfaitement ...

Apparamment $subcategory.id_image n'existe pas ! ou bien quoi ??

[fastcooler]

I tried to apply this mod, but I don't undestand which file I have to modify and which string (and where) I have to add.

Someone may help me, please?

Many thanks,
Best Regards

[dna]

is it possible to add a small thumbnail to the subcategory product images like the sample

[kleinermann]

This is not very clear to me. I'd really appreciate some help.

1. Do i create a tpl file within my theme and overwrite the blocktopmenu modules tpl file in order to achieve this?

2. Where in the content of the blocktopmenu.tpl file can i place my code? There seems to be only a
{$MENU} variable. How can i split this up into items? (Sorry, i'm not that good at PHP)

{if $MENU != ''}

               <!-- Menu -->


           {$MENU}
           {if $MENU_SEARCH}

             <form id="searchbox" action="search.php" method="get">
               <input type="hidden" value="position" name="orderby"/>
               <input type="hidden" value="desc" name="orderway"/>
               <input type="text" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query}{else}{l s='search...'}{/if}">
             </form>

           {/if}

       [removed][removed]
       [removed][removed]
       <link rel="stylesheet" type="text/css" href="{$this_path}css/superfish-modified.css" media="screen">
               <!--/ Menu -->
       {/if}    

Please see my other post here for more details on what exactly i need to achieve: http://www.prestashop.com/forums/viewthread/111924/themes/how_to_add_category_logos_in_top_horizontal_menu/

[RedOut]

not working to insert images to categories menu!

image link category is: <img src="http://supermarketconstanta.ro/c/15-category_default/ceai-1.jpg" alt="" width="150" height="150">

 

what is the code? THX!

[vekia]

not working to insert images to categories menu!

image link category is: <img src="http://supermarketconstanta.ro/c/15-category_default/ceai-1.jpg" alt="" width="150" height="150">

 

what is the code? THX!

 

what menu module you use? what ps version?