Image Formatting

Introduction

Image formatting looks more complicated than it actually is, but is needed in order to ensure that the presentation of items such as photographs and graphic remains consistent throughout the site.

Each section of an image link is described below, using one of images hosted at Photobucket as a working example.

Our images are normally aligned to the right or left side of the page, within a frame, with those on the right scaled to 200 pixels in width, while those on the left are scaled to 150 pixels in height. This means that a standard 640 x 480 pixel image will be the same size in either position.

Images we host are normally 640 x 480 pixels, compressed to a nominal file size of 64 kb as their only purpose is for viewing on screen. Other sizes may be used where appropriate to the subject and level of detail required.

(:htoc:)

Basic link

A basic link is created using the site's standard markup of [[ | ]] as follows:

[[target | display]] where:

target
is the item that is shown when the link is clicked.
display
is what is displayed to the reader as the link to the target. The most important thing to note here is that this can be plain text, or an image.

(Note, the examples shown below automatically wordwrap within the grid used to display them. This is a side effect of the example grid only, and should be ignored. Links should be typed without any breaks or returns.)

These two options are shown below. In the first, the target is the url or address of the image, while display is replaced simply by text, which provides a clickable text link , which displays the image. In the second, display has been replaced by the url of the image, which provides a clickable image, which simply displays the same image:

[[http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg | Toward Church Hall]]

Toward Church Hall

[[http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg | http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg]]

Left, and right framed images

In order to have the images appear within a frame to the right or left of the page, and be reduced to the desired size, it is necessary to add the appropriate prefix to the link as follows:

Right frame

Articles usually have the first image placed at the top of the page, on the right.

The following prefix applies this style, applying the right frame, setting the width to 200 pixels, and finally removing the small external link graphic which can be seen to the lower right corner of the full size image above:

%rframe width=200px wikilink%

Adding this to basic link used above gives:

%rframe width=200px wikilink%[[http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg | http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg]]

Left frame

The corresponding prefix below is used for images placed on the left of the page, and included an additional setting to add a one line space above images placed on the left:

%lframe height=150px margin-top=1em wikilink%

Adding this to the basic link gives:

%lframe height=150px margin-top=1em wikilink%[[http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg | http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg]]

Captions

Short captions can be added below the framed image by placing it after a pipe, the | character (bottom left corner of keyboard - beside Z), after the link.

Caption text will not wordwrap, so must be shorter than the width of the framed image, or a forced line break must be inserted using the [[<<]] markup:

%lframe height=150px margin-top=1em wikilink%[[http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg | http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg]] | Toward Church Hall

%lframe height=150px margin-top=1em wikilink%[[http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg | http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg]] | Toward Church Hall on the Kintyre peninsula

%lframe height=150px margin-top=1em wikilink%[[http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg | http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg]] | Toward Church Hall[[<<]]on the Kintyre peninsula

Toward Church Hall

Toward Church Hall on the Kintyre peninsula

Toward Church Hall
on the Kintyre peninsula

Tooltip text

The final requirement is the addition of the tooltip text that appears when the mouse is hovered over an image. This is placed between quotation marks following the display url. This normally contains the same text as the caption, with the addition of the year taken, and its source:

%lframe height=150px margin-top=1em wikilink%[[http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg | http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg"Toward Church Hall, 2008, Fox"]] | Toward Church Hall

%lframe height=150px margin-top=1em wikilink%[[http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg | http://i6.photobucket.com/albums/y235/Section1/swiki/t1/towardchhall.jpg"Toward Church Hall on the Kintyre peninsula, 2008, Fox"]] | Toward Church Hall[[<<]]on the Kintyre peninsula
Toward Church Hall, 2008, Fox
Toward Church Hall
Toward Church Hall on the Kintyre peninsula, 2008, Fox
Toward Church Hall
on the Kintyre peninsula