Textpattern tips, tutorials and code snippets

Article image gallery with Shadowbox

This is a simple way to create image galleries inside your articles, using upm_image, upm_img_popper and Shadowbox.

Install Shadowbox and upm_image

Follow the previous tip on creating a Shadowbox gallery for instructions on how to install Shadowbox, and then install the upm_image and upm_img_popper plugins if you haven’t done so already.

Pull the article images into your form

In your default form (or whichever form you use for your articles), place the following code:

<div id="article-image">
<txp:upm_article_image limit="20" form="article_image_thumbs" wraptag="ul" class="your_wraptag_class_name" />

The upm_article_image tag pulls the article images associated with your article, and then assigns the form article_image_thumbs to process the results.

Create the article_image_thumbs form

<li><a href="<txp:upm_img_full_url />" rel="shadowbox[gallery1]"><img src="<txp:upm_img_thumb_url />" alt="<txp:upm_img_alt />"></a></li>

The upm_img_ tag names should be self-explanatory, for a full explanation consult the plugin documentation. The important part is the rel="shadowbox[gallery1]" portion. You can use rel="shadowbox[gallery]" instead, but I have another Shadowbox gallery on the same page, so I use shadowbox[gallery] for the page gallery and rel="shadowbox[gallery1]" for the article image gallery.

Also important is the use of txp:upm_img_thumb_url – this will pull the thumbnail image for display in your page. Clicking on the thumbnail will bring up the large image in a Shadowbox modal window.

Put some images in your article…

Choose Insert Image from the left of the Write tab window. From the pop-up window, find the images you wish to insert, and choose Article image (append). You will see a success message. Insert as many images as you wish.

Look at your Advanced Options and test the results..

After inserting the images, open Advanced Options in the same Write tab window. You should see a comma separated list of image id’s, corresponding to the images you inserted.

After saving the article, check to see how it looks!

2 Comments Comment feed

  • Andrea
  • 1 January 2009

Hey guys, great tutorial and great job you’ve done. I’ve tried this on my next website and it works great!
Keep posting!


  • bootle
  • 24 November 2009

Making a site for a client, and was wondering if I could fit in a lightbox of some sort. This looks great – however, the client will be using TinyMCE to insert images. Any chance of that working?

I think the ideal lightbox would be just a form that could detect any images inserted on an article as thumbs, such that clicking on a thumb brings up a lightbox for the image(s) as thumbs in that article. If more than on article, with sets of images, present on a page, it wouldn’t get confused – i.e. the lightbox would limited itself to the images in the article that was clicked on. A challenge or possible?

good luck and thanks for txp!

Add a comment

Use Textile help to style your comments