Help:Images and media

Images, videos and audio files that have been uploaded to Festipedia or Wikimedia Commons can be displayed on any page using an image link:

[[File:{name}|{type}|{alignment}|{vertical alignment}|{size}|{caption}]]

You must specify the name, otherwise the software won't know which image you want to display! All other elements are optional and can be placed in any order. In most cases, you should use [[File:{name}|thumb|{caption}]].

Note that the software will work out automatically whether the required image is from Wikimedia Commons. If an image uploaded to Festipedia has the same filename as one in Wikimedia Commons the Festipedia version will always be used.

Options

Type

Type can be "thumb", "thumbnail", "frame", "framed", "enframed", "frameless" or "border".

"thumb" or "thumbnail" displays the image in a box with any caption below the image. The image will appear on the right of the page unless an alignment is specified. The image is scaled to 180 pixels wide unless:
- a different size is specified in the user's preferences, or
- a size is specified in the image link.
"frame", "framed" or "enframed" displays the image in a box with any caption below the image. The image will appear on the right of the page unless an alignment is specified. The image will always be displayed full size, ignoring any size specified in the image link.
"frameless" displays the image with no box. The caption is not displayed. The image will appear on the left of the page unless an alignment is specified. The image is scaled to 180 pixels wide unless:
- a different size is specified in the user's preferences, or
- a size is specified in the image link.
"border" displays the image in a box. The caption is not displayed. The image will appear on the left of the page unless an alignment is specified. The image will be displayed full size unless a size is specified in the image link. If the size specified is larger than the full size of the image, the image will be scaled up accordingly, preserving its aspect ratio.
If no type is specified, the image is displayed with no box. The caption is not displayed. The image will appear on the left of the page unless an alignment is specified. The image will be displayed full size unless a size is specified in the image link. If the size specified is larger than the full size of the image, the image will be scaled up accordingly, preserving its aspect ratio.

It is possible to specify an image to be used in a thumbnail if the system generated thumbnail is inadequate. To do this, specify thumb=imagename. The specified thumbnail image will be displayed full size. For example, [[File:Foo.jpg|thumb=Bar.jpg]] will display Bar.jpg in a box at its full size, but clicking on the image will take the user to the image description page for Foo.jpg. This feature should only be used in exceptional circumstances.

Alignment

Alignment can be "left", "right", "centre", "center" or "none".

"left" and "right" place the image on the appropriate side of the page. The article text following the image will flow round the image
"centre" and "center" place the image in the centre of the page. The article text following the image will appear below the image
"none" places the image on the left of the page. The article text following the image will appear below the image

Vertical alignment

Vertical alignment can be "baseline", "sub", "super", "top", "text-top", "middle", "bottom" or "text-bottom". These are mainly used where an image is to appear embedded in text.

"baseline" aligns the bottom of the image with the baseline of the text
"sub" and "super" give subscript and superscript alignment
"top" aligns the top of the image with the top of the line of text
"text-top" aligns the top of the image with the top of the font
"middle" aligns the middle of the image with the middle of the text
"bottom" aligns the bottom of the image with the bottom of the line of text or the lowest element on the line
"text-bottom" aligns the bottom of the image with the bottom of the font

Size

"upright" specifies that the image width should be 0.75 of the default thumbnail width
"upright=0.6" specifies that the image width should be 0.6 of the default thumbnail width. You can specify any number for the scale factor
"100px" specifies that the image is to be 100 pixels wide. You can specify any number for the width.
"100x200px" specifies that the image is to be no more than 100 pixels wide and no more than 200 pixels high. You can specify any numbers for width and height. The original aspect ratio of the image will be preserved.

Note that, if the specified size is smaller than the image, a resized version of the image will be generated by the software. This speeds up display of the page by reducing the amount of data the browser has to download to display the image. If the specified size is larger than the image, the original image is used and the browser is told to scale it appropriately.

If the image is already smaller than the specified width and height and the type is specified as "frameless", "thumb" or "thumbnail" it will be displayed at its normal size. If the type is specified as "frame", "framed" or "enframed" the size specified will be ignored - the image will always be displayed at its normal size.

Caption

Any options which don't look like type, alignment or size are assumed to be the caption. The caption can include links to other pages in the wiki and external links. Normal text formatting can also be used.

The caption will be used as the alt text for the image. This means it appears as a tool tip when the mouse is over the image. Accessibility software makes use of this feature to make the page more understandable to visually impaired users.

Preventing text wrapping round the image

You may want to limit the amount of text that wraps around an image, due to a change in topics or for aesthetic reasons. Before the text that you do not want to wrap around the image, put:

<br clear="all"/>

Linking to the image description page

To link directly to the image description page without displaying the image, use [[:File:{name}]]. You can achieve the same effect by using [[Media:{name}]].

Image galleries

You can display a gallery of thumbnails using the syntax:

<gallery caption="Gallery caption">
File:Example.jpg|Caption1
File:Example.jpg|Caption2
File:Example.jpg|Caption3
File:Example.jpg|Caption4
File:Example.jpg|Caption5
File:Example.jpg|Caption6
</gallery>

This gives:

Gallery caption
Caption1
Caption2
Caption3
Caption4
Caption5
Caption6

Each image name and caption are on a new line. Blank lines are ignored. The images have a fixed width. A line with only text on it is allowed provided it does contains only characters that are legal in page names. The caption in the opening gallery tag is optional.

The gallery tag can also accept a number of other options. These are:

perrow - specifies the number of images that appear in each row of the gallery (the default is 4) widths - specifies the maximum widths of images (the default is 120) heights - specifies the maximum heights of images (the default is 120)

For example:

<gallery caption="Gallery caption" perrow="6" heights="100px" widths="100px">
File:Example.jpg|Caption1
File:Example.jpg|Caption2
File:Example.jpg|Caption3
File:Example.jpg|Caption4
File:Example.jpg|Caption5
File:Example.jpg|Caption6
</gallery>

This gives:

Gallery caption
Caption1
Caption2
Caption3
Caption4
Caption5
Caption6

The opening gallery tag also accepts any attributes that are legal for tables.

Imagemaps

An imagemap is an image with various clickable areas taking the user to appropriate pages within the wiki. This is implemented using <imagemap> tags. An imagemap looks like this:

<imagemap>
File:Foo.jpg|200px|picture of a foo
poly 131 45 213 41 210 110 127 109 [[Linda|Display]]
poly 104 126 105 171 269 162 267 124 [[Blanche|Keyboard]]
rect 15 95 94 176   [[Prince]]
# A comment, this line is ignored
circle 57 57 20    [[Princess]]
desc bottom-left
</imagemap>

This gives:

The contents of an <imagemap> tag consist of blank lines, comments (starting with #) and logical lines. The first non-comment line specifies the image to be displayed. This must be in the same format as an ordinary image link but without the enclosing [[ and ]].

Further lines are split into tokens, separated by whitespace. The function of each line is determined by the first token in the line. All coordinates are according to the full-size image, not the visible image.

desc: Specifies the location of the image description link. May be either top-right, bottom-right, bottom-left, top-left or none. This puts a blue "i" icon in the specified corner, linking to the image description page. The default is bottom-right.

rect: A rectangle. The parameters are the coordinates of the top-left and bottom-right corners followed by a title to link to in square brackets.

circle: A circle. The first two parameters are the coordinates of the centre, the third is the radius. The coordinates are followed by a link in square brackets.

poly: A polygon. The coordinates of the vertices are given followed by a link in square brackets.
Polygons must be defined before any other form!

default: This gives the default link to be used where no other regions are specified.

All coordinates are specified relative to the source image. The image can be scaled using thumbnail syntax, in which case the image map coordinates will be automatically scaled as well.

All links are given in either the form [[Page title]] or [[Page title|description]]. In the latter case, the part after the pipe "|" becomes the title attribute of the link - in most browsers, it will pop up as a tooltip when the user hovers over it. If no explicit link description is given, the page title will be used.

Areas which overlap give precedence to the first link listed.

Imagemap Editor

As of writing, only one imagemap editor has been used. this has been Peter Schlömer's. There may be others which users can use.

Peters program is linked from Media Wiki, and some information can be found here.

The direct link is here.