getResources.Category Index Page with Thumbnails
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.
$307 per month—let's make that $500!Learn more
Make sure you get phpThumbOf as this does the magic of scaling your thumbnail images.
We need to create a way to attach an image to each page.
- Create a new TV and name it: page-thumbnail
- Input type: Image
- Select the proper templates in template access and save.
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"> [[!getResources? &parents=`[[*id]]` &tpl=`list-docs-thumb-tpl` &limit=`100` &sortdir=`ASC` &includeTVs=`1` &includeContent=`1` &depth=`0` &sortby=`menuindex` ]] </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"> <h2>[[+pagetitle]]</h2> <a href="[[~[[+id]]]]" title="[[+pagetitle]]"> <img src="[[+tv.page-thumb:phpthumbof=`w=153&h=200&zc=1`]]" alt="[[+pagetitle]]" /> </a> <p>[[+introtext]]</p> </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.
&tvFilters=`page-thumb==%` to skip resources with empty TV