Images

Image uploads work very much like file uploads. Clicking the Add/View images link below the text editing box takes you to a page which lists all the images associated with that particular module. Again the most important field in this list gives an example tag for inserting a particular image: [image 12]. There are a number of variants on this theme:

• Adding the word 'left' to the end of the tag: [image 12 left] forces the image along the left margin allowing text to wrap around its right side (assuming the image is narrow enough given the width of the browser window).[image 12 right] does the same thing forcing the image to the right, and [image 12 center] will center the image.
• [image 12 border] puts a thin border and a drop shadow around the image
• [image 12 defaultcaption] constructs a caption for the image automatically based on its description and any provenance information provided. This require no 'end' tag. Long captions will automatically be 'hidden' behind a 'show caption' link.
• You can also manually create captions to fit a particular use of an image. [image 12 caption] indicates the image tag is followed by some text that should be used as a caption for the image. The end of the caption text should be marked with an [end caption] tag.
  
  A special variant of this is obtained by using textonly in place of caption like this: [image 12 textonly]. In this case the image itself will not be displayed. Instead the title/alterative text associated with the image will be displayed as a link that points to the details page for that image. This is useful if you want to provide a link to an image but not the image itself.
• End the image tag with a url: [image 12 http://google.com] will make the image act as a link to that address. Make sure that the image is constructed in a way that makes it obvious that it is a link (remembering that what's obvious to you as an author may not be as apparent to others).

All of these image attributes can be added to a single image. However, order is important. The correct order is shown in this example:

[image 12 left border defaultcaption http://google.com]

Captions in the real world

Often you'll want to add a caption to an image but don't want to devote alot of screen space to it. This is especially common since it's good practice to include image credits. Normally the defaultcaption option will do the trick. However you can use the manual caption option along with additional tags to achieve a more unique effect. For instance you can simulate the behavior of defaultcaption by combining the small and hidden tags with the image caption:

Show credits

Hide

Mammoth Terraces, Yellowstone National Park,photo courtesy of Brett Leigh Dicks.

This image makes full use of alot of options. The code for it looks like this:

It's worth taking a minute or to get your head around what's actually going on here: the caption is shrunk with the [small] tag and then hidden.

Also, remember that <br clear> forces stuff below it to move out of the way of stuff above it. Useful when you've got text and images overlapping in odd ways.

Thumbnails

• [thumbnail 12] inserts a shrunken version of the image (150 pixels wide) which when clicked takes folks to a full-sized version of the image. You can specify a different width for the thumbnail by adding a number to the end of the tag. For instance [thumbnail 12 50] would create a 50 pixel wide thumbnail.
• As with images one can apply left and right justification, borders and captions. (urls won't work since thumbnails already point to their full-sized counterparts).
• Normally thumbnails act as links to the full-size image. However, adding detailpage to the end of the tag (as seen below) changes that behavior so that the thumbnail image acts as a link to the detail page for the image (which includes both the full-sized image as well as the description and other information).
• The full correct format for thumbnails is:

  [thumbnail 12 50 left border caption detailpage]

Use thumbnails when it's important to have both a small and large version of an image around. If all you need is a small version just shrink the image to an appropriate size before you upload it.

Uploading Images

The upload options for images are similar to those for files:

You'll need to specify a file name; again without spaces, funny characters, or any suffix. You'll need to provide alternative text for the image: a sentence or phrase than communicates the same information as the image: it must be a useful surrogate for the image. Unlike the file Description, this text will be visible to users and is in fact critical to those unable to see the images (either because of disability or technical limitations like a slow connection). Take a few moments with this field and do a good job--concise phrases that convey the same information the image does are best.

A description field is also available for tracking information related to the image for internal consumption. And finally, you can select the image type and use the Browse button to select the image to be uploaded.

Updating Images

The display of images in the module includes a link to an editing page for each image. The editing page has a form for editing image information (like the alternative text) and one for uploading new revisions of the image. This works exactly like file revisions: uploaded revisions replace the existing image across the site, and earlier revision can be saved or discarded as you deem appropriate using the options in the form.

As with files there is an option provided to delete the image (and any prior revisions) as long as there are no web pages currently using the image.