getResources.Category Index Page with Thumbnails
Last updated Dec 9th, 2019 | Page history | Improve this page | Report an issue
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.
Backers
Budget
$301 per month—let's make that $500!
Learn moreMake 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.
- Create a new TV and name it: page-thumbnail
- Input type: Image
- 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">
[[!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 -->?
Installation¶
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