Modify menu replace text to image

Marketplace
1

Hell,
I need to replace text in menu to image, only in one position of menu.
Modx version 3.0.4

Example:

menu
menu814Ă—75 4.59 KB

Please send me an offer for this service.

2

What snippet do you use to generate the menu?
It’s probably pdoMenu (from the pdoTools extra) or Wayfinder.

Try to locate where this snippet is called.
(It’s probably in the template or in a chunk used in the template.)
In the snippet call, you can (probably) see the template-chunk that is used for the menu. Alter this template-chunk to output the image (for this specific resource).

3

I have found in elements menu:
Under chunks:
Wayfinder:

  • innerRowTpl
  • innerRow
  • outerMobileTpl
  • outerTpl
  • parentRowTpl
  • rowTpl

Under code chunks:
Wayfinder → Snippet Code (PHP)

<?php
/**
 * Wayfinder Snippet to build site navigation menus
 *
 * Totally refactored from original DropMenu nav builder to make it easier to
 * create custom navigation by using chunks as output templates. By using
 * templates, many of the paramaters are no longer needed for flexible output
 * including tables, unordered- or ordered-lists (ULs or OLs), definition lists
 * (DLs) or in any other format you desire.
 *
 * @version 2.1.1-beta5
........
4

So it looks like Wayfinder is used on your site.

The HTML markup of the top menu you want to change is likely located in the “parentRowTpl” chunk.

5

The code in parentRowTpl

<!-- ParentRow -->
<li class="[[+wf.classnames]] [[+noClick:isnot=``:then=`no-click`:else=``]]">
  <a href="[[+wf.link]]">[[+wf.linktext]]<span class="menu-description">[[+wf.longtitle]]</span></a>
  [[+wf.wrapper]]
</li>

Should I add some code after [+wf.longtitle]?

6

You could try using something like this:

[[+wf.docid:is=`123`:then=`<img src="path/to/image.png">`:else=`[[+wf.linktext]]`]]

[[+wf.docid]] is the placeholder for the resource ID.
Here if the ID is 123 :is=`123` (you have to change the value to the actual ID of your resource), an <img>-tag is output instead of the title ([[+wf.linktext]]).

Or maybe you could just add the image tag (<img src="path/to/image.png">) to the field “Menu Title” of the resource.

1 Like
7

Thank you, I will try and let you know.

8

The code works but not in parentRowTpl but in RowTpl
Thank you halftrainedharry !