Wikieducator tutorial/Images and Media/Frames and Thumbnails

Introducing the syntax
In brief, the full syntax for displaying an image is:



Notes:


 * 1) type refers to whether you want to display your image as a thumbnail or framed image;
 * 2) location allows you to specify where on the page the image should appear, for example: left, right or center
 * 3) size allows you to specify the size at which the picture is displayed on the page;
 * 4) caption is where you can add a description for your image.

Only is actually required. Most images should use (and should not specify a size). The other details are optional and can be placed in any order. The following table outlines the optional attributes and their effects on images:

The following table summarises the different options. We practice each of these in separate activities below.

Examples and activities
Here is an image inserted using the most simple image syntax:





The purpose of the following activities is to experiment with different options to manipulate images on the page.

Inserting a thumbnail image with a caption
Using the same image, we have now added the 'thumb' attribute, left aligned, and a caption:







The default image size for a thumbnail is 180 pixels. Clicking on the image will take the user to the larger size.

You should have used this syntax:. Note that you must use the American spelling for "center".

Inserting an image with a frame
This is an image with the frame attribute:





When you use the frame attribute, the embedded image is shown with its actual size enclosed by a frame, regardless of the "thumb" or "size" attribute, and the caption, if any, is visible in the frame. Without the options left, center, and none, the image is normally on the right.

If you had any problems with this activity, the syntax you should have used is: " ". Did you get it right?

Changing the size of the image
If you want to control the size of the image, you can use the size attribute to designate the desired size in pixels. Here is the same image resized and centered:





With regards to the first part of the activity above, you should have used this syntax: