wet_for_each_image: Sample code

10. November 2006

wet_for_each_image is an image listing plugin for Textpattern with a more formal documentation over there.

As a picture is worth a thousand words, I’ve added a few images to illustrate some use cases for this plugin. The sample images are categorized into three categories, and various selections of them are shown below using a choice of both built-in Textpattern tags and image plugins (upm_image is a logical companion plugin as it provides an unlimited amount of flexibility).

Introducing the cast – A simple thumbnail list presenting images from all three categories

<txp:wet_for_each_image category="people,nature,building">
<txp:thumbnail id="{id}" />
</txp:wet_for_each_image>
Curious girl Boy, idling Offensee, Upper Austria Log Rinner Hütte, Ebensee, Salzkammergut, Upper Austria Summer's almost gone Gravel Autumn seed Entrance area to Hangar 7 Red Bull Hangar 7, Salzburg Hangar 7, Salzburg Hangar 7, Salzburg

A gallery with a custom upm_image form and Lightbox 2.0

The gallery tag snippet below selects all desired images and defines the sorting criteria. Each single image is subsequently passed into upm_image, which in turn builds a suitable HTML markup from a form it receives as an attribute:

<txp:wet_for_each_image category="building" sort="name asc">
<txp:upm_image form="lightbox" image_id="{id}" />
</txp:wet_for_each_image>

The custom form for upm_image renders a single thumbnail with a rich bouquet of additional attributes and kickstarts lightbox by adding the proper rel attribute value to the image link (according to the gallery snippet above, name this form lightbox):

<a rel="lightbox[dings]" href="<txp:upm_img_full_url />"
title="<txp:upm_img_alt escape="html" />">
<img src="<txp:upm_img_thumb_url />"
width="<txp:upm_img_thumb_width />"
height="<txp:upm_img_thumb_height />" 
alt="<txp:upm_img_alt escape="html" />"  /></a>
Entrance area to Hangar 7 Red Bull Hangar 7, Salzburg Hangar 7, Salzburg Hangar 7, Salzburg

Basically, this form is another instance of the one presented in my (german) article on Lightbox 2.0, Textpattern and upm_image.

A popup gallery

<txp:wet_for_each_image limit="5" offset="1" category="nature">
<txp:upm_image type="popup" image_id="{id}"/>
</txp:wet_for_each_image>
Log Rinner Hütte, Ebensee, Salzkammergut, Upper Austria Summer's almost gone Gravel Autumn seed

A gallery using a category specified at the URL

The category attribute defaults to the category value as specified in the URL, so this markup will render thumbnails from any category passed in via the page address:

<txp:wet_for_each_image thumb="1">
<txp:thumbnail id="{id}" />
</txp:wet_for_each_image>

Try one of these URLs:

No category selected yet, nothing to show.

Need more flexible rendering options?

wet_for_each_image accepts a form attribute specifiying any Textpattern form (preferably of type misc) which will be used as a worker markup instead of anything contained inside the plugin tag.

Need more flexible selection criteria?

Remember that there are several methods for deriving any attribute’s value not only from fixed markup but also from custom fields, URL vars and computed PHP variables. Also, Sencer’s plugin asy_wondertag might come handy at times, for instance by serving the filter category from an article’s custom field:

<txp:asy_wondertag>
<txp:wet_for_each_image category="<txp:custom_field name="photo-category" />">
<txp:image id="{id}" />
</txp:wet_for_each_image>
</txp:asy_wondertag>