Frames & Thumbnails

Key points

The previous page demonstrated the simplest syntax for adding an image into a page. In this subsection we will cover some additional attributes that you can add to your image syntax to: align images, put images in frames and add captions, and automatically create thumbnails from your images to save space on the page.

Introducing the syntax

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

   [[Image:file name|type|location|size|caption]]

Notes:

1. type refers to whether you want to display your image as a thumbnail of 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 [[Image:file name]] is actually required. Most images should use [[Image:name|thumb|Example image caption]] (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:

Tip: At first this may appear confusing, but experiment with the options introduced below in your Sandbox on your User page. You will soon discover how this works. You don't have to memorise this syntax, because these tutorials are permanently available as reference materials!

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

Additional Image Attributes	Results in
thumb / thumbnail or frame	Results in an image displayed with specific formatting (see the examples below).
Location	'right', 'left', 'center' or 'none'. Determines the placement of the image on the page. Defaults to left.
Size	{width}px or {width}x{height}px, will scale the image to the given width and height, while keeping its aspect ratio.
Caption	Any element that is not identified as any one of the above is assumed to be caption text.

Examples and activities

Here is an image inserted using the most simple image syntax:

[[Image:networkedlearning.jpg]]

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:

[[Image:networkedlearning.jpg|thumb|left|Creative Commons makes it flow.]]

Creative Commons makes it flow.

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

Activity

Using the same image above, go to your sandbox on your User page and insert an image with the following attributes: Thumbnail image To display in the centre of the page With the caption: "This is my first thumbnail"

You should have used this syntax: [[Image:networkedlearning.jpg|thumb|center|This is my first thumbnail]]. Note that you must use the American spelling for "center".

Inserting an image with a frame

This is an image with the frame attribute:

[[Image:networkedlearning.jpg|frame|center|Creative Commons makes it flow.]]

Creative Commons makes it flow.

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.

Activity

Using the image you uploaded on the previous subsection, go to your Sandbox on your User page and insert a framed image with the following attributes: Left aligned Caption with an internal link to the Wikieducator news archive: "This is my image. However, if you want to brush up on old Wikieducator news, go here."

If you had any problems with this activity, the syntax you should have used is: "[[Image:Name_of_your_image_file_goes_here.jpg|frame|left|This is my image. However, if you want to brush up on old Wikieducator news, go [[Old_news|here]].]] ". 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:

[[Image:networkedlearning.jpg|300px|center]]

Tip: Often when adding images you may experience a "bug" in the way they are presented in the wiki environment. An image may 'float' over other text or headings you have in your wiki page. To remedy this try adding the following underneath your image: <br style="clear:both;" />. This will cause the following text or content to start after the image has been embedded in the page.

Activity

Add the same image (above) to your Sandbox on your user page with the following attributes: 350 pixels wide right aligned no caption Try adding some further image attributes to the image you previously uploaded into your User page or Sandbox. If the image is large add the thumb attribute to shrink it down. If your image could use some explanatory text try adding the frame attribute and a caption.

Reflection

How did you do with the first part of the above activity? You should have used this syntax: [[Image:networkedlearning.jpg|350px|right]]

|