Jump to main content Jump to doc navigation

Make sure you get phpThumbOf as this does the magic of scaling your thumbnail images.

The TV

We need to create a way to attach an image to each page.

  1. Create a new TV and name it: page-thumbnail
  2. Input type: Image
  3. Select the proper templates in template access and save.

The Chunks

I like to put my snippet calls in a chunk, this way the RTE doesn't turn the & into &

Create a chunk and name it list-docs-thumb.

<div class="list-docs thumb grid">
</div><!-- eof list-docs -->?

Create a second chunk for the getResources template, name it: list-docs-thumb-tpl (see what I did there? Naming conventions are your friend.)

<div class="list-item column span-6">
    <a href="[[~[[+id]]]]" title="[[+pagetitle]]">
        <img src="[[+tv.page-thumb:phpthumbof=`w=153&h=200&zc=1`]]" alt="[[+pagetitle]]" />
</div>  <!-- eof item -->?


Now just paste [[$list-docs-thumb]] into any page with child pages and TV's set and away you go.

You should be able to pick up a little bit of speed by omitting the &includeContent parameter if you're not using the content in the template :)

Note that this specific example requires phpThumbOf to be installed to display the images - it can be gotten through the package manager.

Use &tvFilters=`page-thumb==%` to skip resources with empty TV

Support the team building MODX with a monthly donation.

The budget raised through OpenCollective is transparent, including payouts, and any contributor can apply to be paid for their work on MODX.



$0 per month—let's make that $500!

Learn more