getRTImages - List and Sort Images from Rich Text Field

Nov 28, 2013

Use Case

You need to give the client control over the images in a slideshow. moreGallery is your premium choice but what if you have no budget to buy Extras? The Gallery component is just too much for this requirement.

*UPDATE[2018/12] The Gallery Extra is susceptible to vulnerabilities. MIGX can be used for galleries, and even MODX Resources with Tagger

Well here's yet another option for an easy-to-manage slideshow in MODX.

getRTImages

Point this Snippet at a TV, and it will grab all the html img elements in the TV value, and return their attributes as placeholders so you can template the output via a Chunk. You use it like this:

[[getRTImages? &tv=`myTV` &tpl=`myTpl`]]

Let's say [[*myTV]] had a bunch of images that your client uploaded via the Rich Text Editor (RTE), but it also had arbitrary markup added by the RTE, like this:

<div class="wrapper">
    <p><img src="img/this.png" alt="png" data-index="2"></p>
    <ul>
        <li><img src="img/that.png" alt="another png"></li>
        <li><img src="img/this.jpg" alt="jpg"></li>
    </ul>
    <img src="that.gif" alt="gif" data-index="1">
</div>  
[[$myTplChunk]]

contains this:

<img src="[[+src]]" alt="[[+alt]]">

You would get this:

<img src="img/that.png" alt="another png">
<img src="img/this.jpg" alt="jpg">
<img src="that.gif" alt="gif">
<img src="img/this.png" alt="png">

Notice that the values from the img element attributes are returned and output nicely based on your Chunk. They are also sorted by the data-index attribute. If there's no value in that attribute, the item shows at the beginning of the list in the order it appeared in the original markup.

You can also set a limit property to limit the number of results, and you can set a custom indexAttr property if you want to use something other than data-index as your index attribute. You can also specify an outputSeparator: the default is PHP_EOL. And last but not least you can specify a Resource ID - the default is the one in which the Snippet is called.

*UPDATE: As of version 1.1.0 there are several sorting options for the results.

Additional Resources

What Does It All Mean?

This is a really quick and easy way to give clients access to slideshows. They don't have to learn any other method of content uploading - they just use the RTE that they're already accustomed to, and it displays the way you want. Install via Package Management or download here. That's it! Don't you love MODX?