textpattern gallery demo

The thumbnails above link to galleries based on image category. Here’s the Txp template for the thumbnail list:

<txp:category_list type="image" exclude="site-design" wraptag="ul" break="li" class="thumbs">
    <txp:category section="">
        <txp:images category='<txp:category />' limit="1">
            <img src="<txp:image_url thumbnail="1" />" alt="" title="<txp:category title="1" />" />
        </txp:images>
    </txp:category>
    <p><txp:category title="1" /></p>
</txp:category_list>

Note the images tag, used here to grab a single image matching the current image category. You can use it as a container tag, as shown here, or with a form. I could have used a plain thumbnail tag inside the images, but in that case the title attribute would have been the image’s caption, which I didn’t want.

Also note how the URL for the category links contains the category type (Txp’s new image context). This allows fine-grained conditional control via an if_category type="image" conditional:

<txp:if_category type="image">
    <section="sooGalleryThumbs">
        <txp:images form="gallery_demo_1" break="" limit="3" />
        <p class="clearboth"></p>
        <txp:images form="gallery_demo_1" break="" limit="3" offset="3" />
        <p class="clearboth"></p>
    </section>
    <section id="sooGallery">
        <txp:images limit="1">
            <txp:image html_id="sooGalleryMain" />
            <p id="sooGalleryCaption"><txp:image_info /></p>
        </txp:images>
    </section>
</txp:if_category>

When images is used without specifying any images (i.e. leaving id, name, category, author, realname, and ext unset), as here, it defaults to a context check. On an individual article page it will look for article images, on an author page it will look for images by that author, and on an image category page it will look for images in that category. (You can disable or restrict this with the auto_detect attribute.)

The form gallery_demo_1 has this:

<a href="<txp:image_url />" title="<txp:image_info />" onclick="return sooGallery(this)">
    <txp:thumbnail />
</a>

Also note the new image_info tag. Used without attributes, it defaults to caption. Or you can use its type attribute to output different image metadata: category, author, date, and so on. (Some of these fields have their own tag, e.g. image_author gives the same output as image_info type="author".)

Click one of the category thumbnails to see this in action. The gallery uses rudimentary javascript to load the main image; it’s quite easy to plug in your favorite image script for fancier effects.