Images in menu?

46 Posts

staed Reply #1, 19 years, 7 months ago

Hi.

I would like to be able to create a menu where both the title of the target page and an image (url stored in a TV on the target page) gets shown in the menu. Is that at all possible? Can’t seem to find a way to do it with wayfinder.

Any ideas?

/Anders Milton

144 Posts

andrazk Reply #2, 19 years, 7 months ago

If I’m not mistaken, WayFinder can output a document ID for each menu entry. Use this IDs for CSS styling.

For instance, make a menu like this:

<ul id="menu">
<li class="id-12">Menu item 1</li>
<li class="id-13">Menu item 2</li>
<li class="id-20">Menu item 3</li>
<li class="id-35">Menu item 4</li>
</ul>

and style it with CSS

ul#menu li {
  margin-left: 1em;
  padding-left: 20px;

  background-repeat: none;
  background-position: 2px -1px;
}

ul#menu li.id-12 {
  background-image: url(assets/images/menu/icon-12.gif);
}
ul#menu li.id-13 {
  background-image: url(assets/images/menu/icon-13.gif);
}

46 Posts

staed Reply #3, 19 years, 7 months ago

But then I’ll have to edit the css-file for each new page. I need totally non-tech-savvy people to use it, so I don’t think css-editing is an option.

But thanks

144 Posts

andrazk Reply #4, 19 years, 7 months ago

If I understand you correctly, non-tech people are going to create/add pages to your system and every page needs a picture for the menu entry?
In this case, how are you/they going to add images to the server? Upload them previously and select from a drop down or upload them when the new page is posted?

In any case, you can add an Image TV to the documents and than change the wayfinder menu template to include that TV, inserting it with a placeholder [+tvName+].
note: TV retrieval is supported in Wayfinder 2.0.

If you can specify the problem or idea in more detail I can help you better.

46 Posts

staed Reply #5, 19 years, 7 months ago

It is for a separate menu that shows pages that shows sub-pages to a specific tree of documents. For these I need images and the pagetitle for each row.

It doesn’t matter how the images gets uploaded. My first idea was to just let the users upload the images with the modx file manager and then enter the URL in a TV for each of the pages.

TV retrieval in Wayfinder 2.0 you say? Does Wayfinder 2.0 break any of the functionality of my current (1.0.1) version?

/A

32 Posts

niemi Reply #6, 19 years, 7 months ago

"If I’m not mistaken, WayFinder can output a document ID for each menu entry. Use this IDs for CSS styling."

How do I make wayfinder do that? My code in the template looks like this: [!Wayfinder?startId=`0` &hereClass=`current` &level=`1` &outerClass=`topav`!]

144 Posts

andrazk Reply #7, 19 years, 7 months ago

Check the &rowIdPrefix parameter.
Read the Wiki pages: http://wiki.modxcms.com/index.php/Wayfinder

As I understand it, it creates a unique ID for every item, based on the prefix and the document ID. Then use [+wf.id+] in your rowTpl template to place it.

For example: &rowIdPrefix=`item-` creates id="item-NN", where NN is the document ID.

Later, use this id for CSS selectors when styling your menu.