Top menu subcategory image

[Fanto]

Hi everyone.

 

i'm new with prestashop.

 

I'd like to have a simple customization for top menu request.

 

i can associate for a category and subcategory an image.

 

Is there a way to display it on topmenu?

 

like this attached menu.

 

 

[Fanto]

no one?

[vekia]

you mean that images below the menu bar:

 

are subcategories? and you want to display images + category name ?

[Fanto]

hi vekia! thanks for your reply.

 

YES, clicking on Hotel (exampe) you can see the subcaterogies menu: image + subategory name.

 

Now (default) i can see only subcategory name.

 

is there a way to have it?

 

when i create category and subcategory name,

i can add a little image (in this case 120x33), this image i'd like to use on subcategory menu...

[vekia]

 

 

I'd like to have a simple customization for top menu request.

it will not be as simple as it seems

contents of default block top menu are generated in module .php file

you have to change code there, and include <img> tag with src param based on Link->getCategoryImage function

[Fanto]

oh. thank you!

 

i'll be testing on it.

 

 

and obviously i'll share it to you

 

an other question.

for testing, is possible to "duplicate" this module renaming sql queries and mysql table? :S

 

or my idea is not permitted from PS license ?

[Fanto]

no i can't solve!

 

i also read this topic: http://www.prestashop.com/forums/topic/291461-adding-sub-category-images-in-blocktopmenu-links/

 

but no luck.

 

 

$link = new Link();

$this->_menu .= '<li '.$selected.'>';

$this->_menu .= '<a href="'.Tools::HtmlEntitiesUTF8($category_link).'">'.$category->name.'</a>';

 

but where i can put in blocktopmenu.php ?

[frank_jarle]

Hey i want the exactly the same thing. I like to place a small picture next to each sub-category either the Picture or the thumbnail for that subcategory.

 

Does anyone have a final solution how this is done, which file that must be edited and which code?

[frank_jarle]

Is it any solution for this one, is it possible to display a small image/thumbnail next to the category name in the menu?

[Pedro Pinto]

any solution??

 

thanks.

[BaptisteLegoupil]

Hi !

In PS 1.6 we are this function but this add in sub menu too.

protected function generateCategoriesMenu($categories, $is_children = 0)
    {
        $html = '';

        foreach ($categories as $key => $category) {
            if ($category['level_depth'] > 1) {
                $cat = new Category($category['id_category']);
                $link = Tools::HtmlEntitiesUTF8($cat->getLink());
            } else {
                $link = $this->context->link->getPageLink('index');
            }

            /* Whenever a category is not active we shouldnt display it to customer */
            if ((bool)$category['active'] === false) {
                continue;
            }

            $html .= '<li'.(($this->page_name == 'category'
                && (int)Tools::getValue('id_category') == (int)$category['id_category']) ? ' class="sfHoverForce"' : '').'>';
            $html .= '<a href="'.$link.'" title="'.$category['name'].'">'.$category['name'].'</a>';

            if (isset($category['children']) && !empty($category['children'])) {
                $html .= '<ul>';
                $html .= $this->generateCategoriesMenu($category['children'], 1);

                if ((int)$category['level_depth'] > 1 && !$is_children) {
                    $files = scandir(_PS_CAT_IMG_DIR_);

                    if (count(preg_grep('/^'.$category['id_category'].'-([0-9])?_thumb.jpg/i', $files)) > 0) {
                        $html .= '<li class="category-thumbnail">';

                        foreach ($files as $file) {
                            if (preg_match('/^'.$category['id_category'].'-([0-9])?_thumb.jpg/i', $file) === 1) {
                                $html .= '<div><img src="'.$this->context->link->getMediaLink(_THEME_CAT_DIR_.$file)
                                .'" alt="'.Tools::SafeOutput($category['name']).'" title="'
                                .Tools::SafeOutput($category['name']).'" class="imgm" /></div>';
                            }
                        }

                        $html .= '</li>';
                    }
                }

                $html .= '</ul>';
            }

            $html .= '</li>';
        }

        return $html;
    }

[frank_jarle]

Could you please add instruction for us that is not into development. Simply showing a code does not help us so much here. Thank you in advanced for sharing your code though :-)

[PrestaSOO]

Hello, is it too late to give you the answer at this time ?   Here i explained how to show subcategories images on Prestashop menu for Prestashop 1.7 :

https://www.prestasoo.com/blog/how-to-show-subcategories-images-in-prestashop-s-top-menu.html

I don't want to talk about Prestashop 1.5 & 1.6 because they are too old.

Edited April 13, 2018 by PrestaSOO
typing mistake (see edit history)

[Prestapepe]

Those solutions are incomplete, because it adds images only to categories that have children categories.

This is the proper solution:

https://stackoverflow.com/questions/50721422/in-prestashop-1-7-how-to-display-categories-thumb-in-the-main-menu-module

 

[diondlemarcu]

On 4/14/2014 at 9:15 AM, Fanto said:

Hi everyone.

 

i'm new with prestashop.

 

I'd like to have a Speed Test Scrabble Word Finder Solitaire simple customization for top menu request.

 

i can associate for a category and subcategory an image.

 

Is there a way to display it on topmenu?

 

like this attached menu.

 

 

Hey i want the exactly the same thing. I like to place a small picture next to each sub-category either the Picture or the thumbnail for that subcategory.

Edited March 31, 2020 by diondlemarcu (see edit history)

[vipier]

On 4/13/2018 at 3:42 AM, PrestaSOO said:

Hello, is it too late to give you the answer at this time ?   Here i explained how to show subcategories images on Prestashop menu for Prestashop 1.7 :

https://www.prestasoo.com/blog/how-to-show-subcategories-images-in-prestashop-s-top-menu.html

I don't want to talk about Prestashop 1.5 & 1.6 because they are too old.

Hello, thank you PrestaSoo for this article (both in french and english 😍).

As I don't have the Magic menu yet, the code as it is in the article didn't work for me.

However it's structure helped me get to this if which did work to show a thumbnail next to the name of the subcategory on prestashop 1.7.8:

                {if $node.image_urls|count}
                  {foreach from=$node.image_urls item=image_url}
                    <img src="{$image_url}" width="30">
                  {/foreach}
                {/if}

I leave it here in case it could help someone else.