Replace menu text with image

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
TPrigas
Forum Members
Forum Members
Posts: 16
Joined: Wed Mar 11, 2020 6:38 pm

Replace menu text with image

Post by TPrigas »

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!
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Replace menu text with image

Post by DIGI3 »

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.
Not getting the answer you need? CMSMS support options
TPrigas
Forum Members
Forum Members
Posts: 16
Joined: Wed Mar 11, 2020 6:38 pm

Re: Replace menu text with image

Post by TPrigas »

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?
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Replace menu text with image

Post by velden »

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
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1609
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: Replace menu text with image

Post by DIGI3 »

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
TPrigas
Forum Members
Forum Members
Posts: 16
Joined: Wed Mar 11, 2020 6:38 pm

Re: Replace menu text with image

Post by TPrigas »

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?
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Replace menu text with image

Post by velden »

Have a look here: https://www.smarty.net/docs/en/language ... .iteration

It could be something like:

Code: Select all

...{if $node@iteration == 4}<img src="{uploads_url}/images/logo.png " alt="" />{else}{$node->menutext}{/if}...
Assuming it's a single level menu. Else it probably should be a little different. Play around a little.
Locked

Return to “Layout and Design (CSS & HTML)”