Default Classic template does not allow to display menu thumbnail image on front-office. To display menu thumbnails in the main menu you need to just follow the below steps.
Go to: Theme root directory > modules > ps_mainmenu > ps_mainmenu.tpl
Now, Copy the below code.
1 2 3 4 5 6 7 | {if $node.image_urls|count} <div class="menu-images-container"> {foreach from=$node.image_urls item=image_url} <img src="{$image_url}"> {/foreach} </div> {/if} |
Then place it to just after below line.
1 | {menu nodes=$node.children depth=$node.depth parent=$node} |
Modified file will be look like as below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | {assign var=_counter value=} {function name="menu" nodes=[] depth= parent=null} {if $nodes|count} <ul class="top-menu" {if $depth == }id="top-menu"{/if} data-depth="{$depth}"> {foreach from=$nodes item=node} <li class="{$node.type}{if $node.current} current {/if}" id="{$node.page_identifier}"> {assign var=_counter value=$_counter+1} <a class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}" href="{$node.url}" data-depth="{$depth}" {if $node.open_in_new_window} target="_blank" {/if} > {if $node.children|count} {* Cannot use page identifier as we can have the same page several times *} {assign var=_expand_id value=10|mt_rand:100000} <span class="float-xs-right hidden-md-up"> <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons"> <i class="material-icons add"></i> <i class="material-icons remove"></i> </span> </span> {/if} {$node.label} </a> {if $node.children|count} <div {if $depth === } class="popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}"> {menu nodes=$node.children depth=$node.depth parent=$node} {if $node.image_urls|count} <div class="menu-images-container"> {foreach from=$node.image_urls item=image_url} <img src="{$image_url}"> {/foreach} </div> {/if} </div> {/if} </li> {/foreach} </ul> {/if} {/function} <div class="menu js-top-menu position-static hidden-sm-down" id="_desktop_top_menu"> {menu nodes=$menu.children} <div class="clearfix"></div> </div> |
Now save the changes and clear the cache after uploading menu thumbnails image from the back-office. Your uploaded menu thumbnail image will be visible in main menu on front-side.
Front-office view:
That’s all.
Leave a Reply