Using Image Links in Main Navigation

- 1 Posts
lifevine Reply #1, 15 years, 1 month ago
Hiya.

So I’m a newbie at Modx and still trying to learn it so bear with me since I’m still rather confused about how this works.

Okay, so the site I created is using image links as the main navigation (they use javascript for rollovers). There are four links and this is what it looks like:
```
<a href="#"><img src="images/lk_02.jpg" srcover="images/lkh_02.jpg" height="89" width="75" border="0" alt="" /></a>
<a href="#"><img src="images/lk_03.jpg" srcover="images/lkh_03.jpg" height="89" width="89" border="0" alt="" /></a>
<a href="#"><img src="images/lk_04.jpg" srcover="images/lkh_04.jpg" height="89" width="78" border="0" alt="" /></a>
<a href="#"><img src="images/lk_05.jpg" srcover="images/lkh_05.jpg" height="89" width="101" border="0" alt="" /></a>
```
From what I understand, it seems as if you can only use ordered lists for the navigation links because it takes the pages you create from your tree and automatically generates them with the Wayfinder. I was also reading about Snippets and Chunks and things but I am still lost as to whether these would offer any solution. Is there any way to create the main navigation with images or will I have to resort to transforming these into an ordered list? If so, I really need help on how to do that.
- 241 Posts
bob1000 Reply #2, 15 years, 1 month ago
You don’t have to use a list for your navigation but there are semantic reasons for doing so since a navigation is a list of links.

Wayfinder by default will output your navigation as an unordered list but you can change that behaviour by using custom template chunks to format your navigation output. For example, a simple Wayfinder call might be:
```
[!Wayfinder? &startId=`0` &outerTpl=`navOuter` &rowTpl=`navRow`!]
```
The &outerTpl parameter calls a chunk called navOuter that contains the wrapper for navigation. The &rowTpl parameter calls a chunk called navRow that contains the code for each link of your navigation. You can find more information on these parameters in the Wayfinder documentation or in kongondo’s Wayfinder e-book.

You would then need to create the two template chunks.

navOuter:
```
[+wf.wrapper+]
```
The [+wf.wrapper+] placeholder gets replaced by the &rowTpl output. You need to include this custom template to remove the <ul>’s inserted by Wayfinder.

navRow:
```
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+navImage+]</a>
```
In this template chunk, we’ve removed the default <li> tags output by Wayfinder. You can find information about the placeholders in the documentation with the exception of [+navImage+]. This isn’t a Wayfinder placeholder, it’s the name of a Template Variable (TV) you need to create to output the images.

Create a new TV and call it navImage. Set the Input Type option to Image and set the Widget option to Image. You then need to assign the TV to the template(s) used by the documents in your navigation. For each document in your navigation, you need to edit the value of the TV and insert the appropriate image.

For the image rollovers, personally I’d use CSS and image sprites to control that rather than javascript.