Wikieducator rich text editor tutorials/Images/Frames and thumbnails

Introducing the options
There are five options, located in the bottom portion of the Image Properties dialog box, for manipulating an image on the wiki page:




 * 1) Caption displays the description typed in the text box under the published image.
 * 2) Special type provides options for how to display your image: thumbnail, framed or bordered.
 * 3) Align specifies where on the page the image should appear: right, left, or center.
 * 4) Width specifies the width at which the image is displayed on the page.
 * 5) Height specifies the height at which the image is displayed on the page.

None of the five options are required; an entry in Image file name is the only requirement. A common practice is to include an image with "thumbnail" specified in the Special Type field, along with some text entered in the Caption text box (without specifying a width or height). But sometimes the default thumbnail size is too small or distorts the image, and a larger size is preferable.

The following table summarises the different options and their effects on images. Practice activities for each of these are included below.

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

Here is an image inserted using just the Image file name:



Inserting a thumbnail image with a caption
Using the same image, if we select "Thumbnail" in the Special type menu, "Left" in the Align menu, and type "Creative Commons makes it flow." in the Caption text box in the Image Properties dialog box, the image displays as:



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

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 "width" or "height" attribute, and the caption, if any, is visible in the frame. Without the options left or center, the image is displayed on the right.

Changing the size of the image
To control the size of the image, use the width and height attributes to designate the desired width or height in pixels. Here is our example image resized to a width of 300 px and centered: