SERC > SERC Content Management System > Images

Images

Image uploads work very much like file uploads. Once you've uploaded the image using the Upload File/Image button it is assigned a unique id number. You can use this number within an image tag to insert the image into the page. The basic tag is: [image 12] and there are a number of additional modifiers you can apply within the tag to change the appearance of the image.

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:

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:


[image 3575 left border caption]
[small][hidden 'credits']Mammoth Terraces, Yellowstone National Park,
<em>photo courtesy of Brett Leigh Dicks.</em>
[end hidden][end small][end caption]


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

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.


Updating Images

The display of images in the sidebar includes a link to an editing page for each image. The editing page has a form for editing image information (like the description) 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.

Creating Images for the Web: an Aside

People have written entire books about how to cook up images appropriate for the web. Here's one good starting point. We won't try to cover that ground here beyond offering these tips:
  • Images must be in gif, png or jpg format.
  • Size your images appropriately before you upload them and keep your images as compact as possible. Wider than 500 pixels is probably too much; use thumbnails. There are many tools you can use for resizing. Professional tools like Photoshop often give the best results but there are free tools that will work for both Windows and Macs.
  • Time spent waiting for web pages to load is largely spent waiting for the images. Before you sprinkle your pages with a lot of decorations consider whether folks with slow connections might appreciate a bit more restraint.

« Previous Page      Next Page »