CMS Made Simple Forums

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!

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.

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?

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

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.

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?

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.