We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 1330
    • 79 Posts
    I'd like to use wayfinder to build a menu that displays 2x4 or 2x6 (etc) so I can go wider than1 column but have it go down the page. I'd like to do this so I can basically display multiple dogs on a page.
    I had a really nice code I could use with PHP that would pull all the .html files in a folder and display item name and a picture but I don't think it will function with MODx.
      • 22427
      • 793 Posts
      I'm not sure to understand what you want to achieve. Could you provide a picture how it should look like?
        • 1330
        • 79 Posts
          • 22427
          • 793 Posts
          To create a menu with several boxes in a line, you can use Wayfinder with the parameter &outerClass=`outer` and this rule in the CSS:
          ul.outer li {
          	display: inline;
          }
          
          This ensures that your menu entries are lined up side by side, with a line break at the right end of the viewport (like a wrapped text).
          To make the menu items a picture with description, you need a special &rowTpl chunk. The question is where you get the picture and its description from. Assuming they are TV values of the target page, you would need placeholders for these TVs in your &rowTpl chunk.
            • 1330
            • 79 Posts
            I've done pictures in the past but I was just looking for a way to "textwrap" the menu, this IS what I was looking for, thank you very much.
              • 1330
              • 79 Posts
              Okay so maybe someone could help me with this.
              I'd like to do basically what Ottogal said.

              I want to build a second menu for the page that Pulls TV 1 (Name) and TV2 Picture into a menu that they can click to see more information.

              Can someone give me a little how to on this? It has been so long since I did something similar that I do not recall how to do it.

              Any help will be greatly appreciated.
                • 1330
                • 79 Posts
                  • 22427
                  • 793 Posts
                  Assuming you have the TVs dog_picture (of type image) and dog_description (of type text) for the resources in the container Females [ do I remember correctly, they are dogs, not women? ;-) ],
                  you could use this chunk for the &rowTpl parameter:
                  <li [+wf.id+] [+wf.classes+] >
                  <a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+dog_picture+]
                  [+dog_description+]</a>
                  [+wf.wrapper+]
                  </li> 

                  (Or take [+wf.linktext+] instead of [+dog_description+].)

                  The layout you should rule via CSS. (It might look better to give all the pictures the same size.) [ed. note: ottogal last edited this post 14 years, 9 months ago.]
                    • 1330
                    • 79 Posts
                    I tried that code but it doesn't seem to be working.
                    http://www.barnyardbullys.com/index.php?id=3

                    I also tried to apply a CSS style and it doesn't appear to be working either.
                      • 1330
                      • 79 Posts
                      A few tweaks and I got it working.
                      Thank you very much for your help, this is doing exactly what I wanted it to.
                      I will have to book mark this thread.

                      <li [+wf.id+] [+wf.classes+] >
                      <a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]><h1>[+wf.linktext+]</h1><img src="[+dog_picture+]" />
                      </a>
                      <hr/>
                      [+wf.wrapper+]
                      </li>