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" />
</div>

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!