Including multiple article images

21 October 07 , ,

Though a bit more complicated than including just a single article image, adding multiple images to your article is still fairly straightforward. The process still begins with uploading all your images and their thumbnails, and filling in the alt and caption fields, if desired (Uploading Images for instructions, or view the screencast).

The next step can vary depending on the setup you have, but in general, you will put a snippet of code into your article, indicating which image you want inserted, whether you want it to be a pop-up image, and whether you want it aligned left, right, or center. It will look something like this:

<txp:upm_image image_name="imgSample.jpg" form="imgR" />

or, for a pop-up image

NOTE: There must be a space before this line of code, and it should be preceded and followed by a blank line.

These snippets basically say: “put the image ‘imgSample.jpg’ here, and format it in this particular way.” The first example simply embeds the image in your article. The second embeds the thumbnail, which, when clicked on, causes a window to pop up with the larger version of the image. You can add as many of these snippets, and thus as many images, to your article as you like. Let’s look at examples of each of the possible formats for your images.

Full-size image, aligned right or left

<txp:upm_image image_name="imgSample.jpg" form="imgR" />

Photo of Italy

Lis, Lisa, and Steve hike up the hill in Cinque Terre

Here is the original image aligned to the right (it can also be aligned left, using imgL instead of imgR), not linked to any popup window. Obviously, it is much to large to look good in this format, sharing space with the text. Generally, anything wider than half the width of your text column is too large to be aligned left or right within the text.

Full-size image, centered

A better option for a large image is to center the image on its own new line:

<txp:upm_image image_name="imgSample.jpg" form="imgC" />

Photo of Italy

Lis, Lisa, and Steve hike up the hill in Cinque Terre

Thumbnail image, with popup, aligned right

Alternatively, rather than putting the full-size image in the article, we can use the thumbnail, linked to the full-size image.

<txp:upm_image image_name="imgSample.jpg" form="popup_imgR" />

Now the image thumbnail, a much more reasonable size, is embedded in my article. It is linked to the original image, so if you click on it, a popup window appears showing the original, full-size image. This method only works if you have created or uploaded a thumbnail of your image. See Uploading Images for instructions on how to do this.

Thumbnail image, with popup, aligned left

For a left-aligned thumbnail, you would simply use form="popup_imgL" rather than form="popup_imgR", like so:

<txp:upm_image image_name="imgSample.jpg" form="popup_imgL" />

This format is good for images in the middle of your article, but doesn’t work as well at the beginning of an article, where the image will appear before directly after the header, before any article text.

You can see all this in action by watching the screencast Add multiple images.

For a simpler method you can use to include just one image per article, see Including a single article image.

No comments yet…Be the first!

Comments are closed for this article.