Assign an image to each item in list

General
1

Hi, I’m creating a website and I want a page where there’s one page with a list of all pages and each page is supposed to have a specific image next to it. How can I achieve this? Thanks.

2

I assume that you want to create and update the list dynamically to always show all pages you have? Also I assume by pages you mean resources?

If this is the case I would create an image TV and assign it to all the resources you want to list. Then use getResources to retrieve all “pages” and define a template chunk where you layout the name and the image the way you want.

1 Like
3

That sounds like something I want. I’m already using Wayfinder, but that doesn’t have any support for custom item tpl.

Sorry for a dumb q, but are you saying that there will be template variables from more pages on one page? I didn’t know that’s possible… Thanks!

4

Wayfinder has the option as well and I’m pretty sure Wayfinder and getResource somewhat work the same way. Now that you mention Wayfinder I assume you want a navigation and show different images next to each navigation point?

You can do this with Wayfinder by defininig the &rowTpl for example like this:

<li>
   <a href="[[+wf.link]]">
      <img src="[[*navImg]]" alt="">     // edit: TV call needs to be [[+tv.navImg]] (see thread below)
      [[+wf.linktext]]
   </a>
</li>

Note the TV call [[*navImg]] (edit: [[+tv.navImg]]). Like mentioned above create a new TV with the Input Type “Image” and name it accordingly (in this example obviously navImg). Then under Template Access you can assign it to all needed templates which are used in your resources. Then edit the TV under Template Variables in each resource to show the wanted image. The rest should be styling, etc.

1 Like
5

It works! Almost… I’ve done exactly what you said, the tpl is almost the same. However, the TV now gets the image from the page where the list is, not the pages that are listed. So all of them are in the end the same…

Also, the page that contains the list is the parent of listed pages.

6

Oh yes, my bad. Try changing the call and the rowTpl like described here.

2 Likes
7

Works great now! Thank you!

1 Like
8

This topic was automatically closed 2 days after discussion ended and a solution was marked. New replies are no longer allowed. You can open a new topic by clicking the link icon below the original post or solution and selecting “+ New Topic”.