Last updated Oct 27th, 2020 | 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.
$400 per month—let's make that $500!Learn more
- Setup a Rich Text TV
- Install getRTImages via Package Management
- Call the Snippet
- Template the output with a Chunk
- Content Editors can upload an arbitrary number of images using whichever Rich Text Editor you have installed, and they will be displayed accordingly. It doesn't matter if they put bad markup in the TV, only img elements are extracted.
This is best suited for simple slideshows. Images can be managed on a per-resource basis, with a UI that is already familiar to content authors and end users - the Rich Text Editor.
There are, of course, many free and premium gallery Extras that can do a whole lot more, but often they're "too much". MIGX is the usual go-to for this use case, but that takes a bit of setup, and if you're trying to teach someone else how to setup a slideshow, the getRTImages method is incredibly easy to teach. It's also cleaner in the Resource Tree, versus using nested Resources to manage images...and frankly that's not really what Resources were intended to be used for.
In the end, this is only one of many slideshow & gallery management options in MODX, so you have the freedom to choose the one most appropriate for your circumstances.
How To Use¶
[[getRTImages? &tv=`rich_text_TV` &tpl=`image_list_tpl`]]
This would extract all html img elements, grab the "src", "alt", "title", and "data-index" attributes and make them available as placeholders in the &tpl Chunk. Up to 10 images will be returned by default, but that can be modified using the &limit property.
<li><a href="[[+src]]" title="[[+title]]"><img src="[[+src]]" alt="[[+alt]]"></a></li>
||The "src" attribute of the img element.|
||The "alt" attribute...|
||The "title" attribute...|
||The value from the attribute defined in the "indexAttr" property.|
|&id||ID of the Resource from which to get the TV value.||Yes||Current Resource:
|&tv||Name of TV from which to extract images.||Yes||null (snippet will return nothing if not set)|
|&tpl||Name of Chunk to use as output template.||No||null (snippet will print an array of results)|
|&outputSeparator||Separate each result with this character/string.||No||PHP_EOL|
|&sort||Method by which to sort results. See below for details.||No||ASC (php asort function)|
|&indexAttr||Attribute from which to get the value for the index array key.||No||data-index|
|&limit||Limits output to this number of results. Note: if dumping to array this property is ignored.||No||10|
|Property Value||PHP function||Behaviour|
|'ASC'||asort()||The position of the elements in the array seems to affect priority of sorting using this method. As such, values are prioritized in this order: index, src, alt, title. Which means, when the "indexAttr" property is defined, and there are values in those attributes, those values will act as a "sort order index". This gives the end user or content author control over sorting by adding incremental values to the "data-index" attribute, for example.|
|'DESC'||arsort()||Same as above but in reverse order.|
|'natural'||natsort()||Although this is meant to sort items the way a human would do it, using it on an array (like we are) has unexpected results. This feature is experimental at best.|
|'RAND' or 'random'||shuffle()||Random sorting.|
|'0' or null||DOM ordering||This will return results in the same order in which they appear in the source html. This is also an easy, intuitive way to give end users control over sort order.|