Hello!
Is there a way to replace the text of a menu item (inside <li></li>) with an image using the {Navigator loadprops=0 template='cssmenu' childrenof='Parent'} tag?
Thanks in advance!
Replace menu text with image
Re: Replace menu text with image
Yep, just add the appropriate html to your Navigator template.
If you want a different image on each page you can either use the page_image tag, or create a content_image block and reference it with page_attr.
If you want a different image on each page you can either use the page_image tag, or create a content_image block and reference it with page_attr.
Not getting the answer you need? CMSMS support options
Re: Replace menu text with image
Question is: I wnat just ONE item to show an image (the middle one as a logo) and 6 others left with text. The way I see it it's only possible to show all in text or all in images. Am I missing something?
Re: Replace menu text with image
Anything is possible in CMSMS templates.
For example: you could in your Navigator template check if the page image has a proper value and only than show the image.
Another option would be to do some logic on the foreach loop to find the middle item.
Check this https://docs.cmsmadesimple.org/layout/d ... /navigator
and especially the $node->image AND the loadprops parameter
For example: you could in your Navigator template check if the page image has a proper value and only than show the image.
Another option would be to do some logic on the foreach loop to find the middle item.
Check this https://docs.cmsmadesimple.org/layout/d ... /navigator
and especially the $node->image AND the loadprops parameter
Re: Replace menu text with image
I'd say you're missing how Smarty works - if/else is a pretty standard check, you could use it to determine if the page has an image set in the desired field, and, if not, display the menutext instead.
Not getting the answer you need? CMSMS support options
Re: Replace menu text with image
Hello again,
Here is my cusmized cssmenu template. Ican't figure out how to make the fourth item to replace the text with it's image (logo.png):
{if !isset($depth)}{$depth=0}{/if}
{strip}
{if $depth == 0}
<nav class="main-nav-pages" id="test">
<!--main-nav-start-->
<div class="small-logo-mobile">
<a href="#header"><img src="http://ordemdosmedicos.co.ao/uploads/or ... l-logo.png" alt="Ordem dos Médicos de Angola"></a>
</div>
<div id="menuwrapper" class="container">
<ul id="primary-nav" class="main-nav">
{else}
<ul class="unli">
{/if}
{$depth=$depth+1}
{foreach $nodes as $node}
{* setup classes for the anchor and list item *}
{$liclass=[]}
{$aclass=[]}
{* the first child gets a special class *}
{if $node@first && $node@total > 1}{$liclass[]='first_child'}{/if}
{* the last child gets a special class *}
{if $node@last && $node@total > 1}{$liclass[]='last_child'}{/if}
{if $node->image}
{$menutext = content_image}
{/if}
{if $node->current}
{* this is the current page *}
{$liclass[]='menuactive'}
{$aclass[]='menuactive'}
{/if}
{if $node->has_children}
{* this is a parent page *}
{$liclass[]='menuparent'}
{$aclass[]='menuparent'}
{/if}
{if $node->parent}
{* this is a parent of the current page *}
{$liclass[]='menuactive'}
{$aclass[]='menuactive'}
{/if}
{* build the menu item from the node *}
{if $node->type == 'sectionheader'}
<li class='{implode(' ',$liclass)}'><a{if count($aclass) > 0} class="{implode(' ',$aclass)}"{/if}><span class="sectionheader">{$node->menutext}</span></a>
{if isset($node->children)}
{include file=$smarty.template nodes=$node->children}
{/if}
</li>
{else if $node->type == 'separator'}
<li style="list-style-type: none;"><hr class="menu_separator"/></li>
{else}
{* regular item *}
<li class="{implode(' ',$liclass)}">
<a{if count($aclass) > 0} class="{implode(' ',$aclass)}"{/if} href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>
{if isset($node->children)}
{include file=$smarty.template nodes=$node->children}
{/if}
</li>
{/if}
{/foreach}
{$depth=$depth-1}
</ul>
{if $depth == 0}
<div class="clearb"></div>
</div>{* menuwrapper *}
</nav>
<!--main-nav-end-->
{/if}
{/strip}
Any suggestions?
Here is my cusmized cssmenu template. Ican't figure out how to make the fourth item to replace the text with it's image (logo.png):
{if !isset($depth)}{$depth=0}{/if}
{strip}
{if $depth == 0}
<nav class="main-nav-pages" id="test">
<!--main-nav-start-->
<div class="small-logo-mobile">
<a href="#header"><img src="http://ordemdosmedicos.co.ao/uploads/or ... l-logo.png" alt="Ordem dos Médicos de Angola"></a>
</div>
<div id="menuwrapper" class="container">
<ul id="primary-nav" class="main-nav">
{else}
<ul class="unli">
{/if}
{$depth=$depth+1}
{foreach $nodes as $node}
{* setup classes for the anchor and list item *}
{$liclass=[]}
{$aclass=[]}
{* the first child gets a special class *}
{if $node@first && $node@total > 1}{$liclass[]='first_child'}{/if}
{* the last child gets a special class *}
{if $node@last && $node@total > 1}{$liclass[]='last_child'}{/if}
{if $node->image}
{$menutext = content_image}
{/if}
{if $node->current}
{* this is the current page *}
{$liclass[]='menuactive'}
{$aclass[]='menuactive'}
{/if}
{if $node->has_children}
{* this is a parent page *}
{$liclass[]='menuparent'}
{$aclass[]='menuparent'}
{/if}
{if $node->parent}
{* this is a parent of the current page *}
{$liclass[]='menuactive'}
{$aclass[]='menuactive'}
{/if}
{* build the menu item from the node *}
{if $node->type == 'sectionheader'}
<li class='{implode(' ',$liclass)}'><a{if count($aclass) > 0} class="{implode(' ',$aclass)}"{/if}><span class="sectionheader">{$node->menutext}</span></a>
{if isset($node->children)}
{include file=$smarty.template nodes=$node->children}
{/if}
</li>
{else if $node->type == 'separator'}
<li style="list-style-type: none;"><hr class="menu_separator"/></li>
{else}
{* regular item *}
<li class="{implode(' ',$liclass)}">
<a{if count($aclass) > 0} class="{implode(' ',$aclass)}"{/if} href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}><span>{$node->menutext}</span></a>
{if isset($node->children)}
{include file=$smarty.template nodes=$node->children}
{/if}
</li>
{/if}
{/foreach}
{$depth=$depth-1}
</ul>
{if $depth == 0}
<div class="clearb"></div>
</div>{* menuwrapper *}
</nav>
<!--main-nav-end-->
{/if}
{/strip}
Any suggestions?
Re: Replace menu text with image
Have a look here: https://www.smarty.net/docs/en/language ... .iteration
It could be something like:
Assuming it's a single level menu. Else it probably should be a little different. Play around a little.
It could be something like:
Code: Select all
...{if $node@iteration == 4}<img src="{uploads_url}/images/logo.png " alt="" />{else}{$node->menutext}{/if}...