How to add a different image before each menu item?

15 Posts

spietreser Reply #1, 18 years, 5 months ago

Is it possible to add an image/icon (16x16 .gif files) before each menu item, and specify which image goes before which menu item?

So, for example:
[house icon] Homes
[car icon] Cars
[dog icon] Dogs
etc...

How can I do this? huh

MODX Staff
12,272 Posts

Ryan Thrash Reply #2, 18 years, 5 months ago

Use the ID placeholder and set a custom ID for each menu item, then use CSS to place the icon.

Ryan Thrash, MODX Co-Founder
Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 18 years, 5 months ago

Or you could put the image tags in one of the document fields that you aren’t using (such as Description, or even Link Attributes) and put the placeholder for that field in the chunk template for that part of the menu (such as parentRowTpl).

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

28 Posts

elander Reply #4, 18 years, 5 months ago

I did it with a custom template and snippet, and a folder for each page (this was for a picture gallery, so I already had folders for each page). The folder for a particular page was named by the page id, so the folder for the page with id=47 had the name "47". Here’s how it looks:

Wayfinder call:

[!Wayfinder? &startId=`[[UltimateParent]]` &hideSubMenus=`1` &levelClass=`level` &selfClass=`here` &rowTpl=`child` !]

The chunk "child":

<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]> [[menyBild? &Id=`[+wf.docid+]`  ]] [+wf.linktext+]</a>[+wf.wrapper+]</li>

Snippet "menyBild":

<?php
if (isset($Id)) {
$output= is_file('assets/images/'.$Id.'/meny.jpg')? '<IMG border="0" SRC="assets/images/'.$Id.'/meny.jpg" /><br />':'';
} else {
$output= "Det finns ingen Id";
}
return $output;
?>

Hope this helps...

/elander
http://scribus.se