Article image gallery with 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!