Help:Images

The syntax for displaying an image is:

[[Image:{name}|{type}|{location}|{size}|{upright}|{border}|{caption}]]

Only [[Image:{name}]] is 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.

Type

'thumb' or 'frame'. Causes image to be displayed with specific formatting (see below).

Location

'right', 'left', 'center' or 'none'. Determines placement of the image on the page. Defaults to 'right'.

Size

{width}px or {width}x{height}px, scales the image to be no greater than the given width and height, keeping its aspect ratio.

Upright

for use only on images that are taller than they are wide. This scales the image differently, considering both width and height instead of only width.

Border

adds a border around the image

Caption

Any element which cannot be identified as one of the above is assumed to be caption text.

Examples

Most images on OutHistory should be inserted like this:

 [[Image:Clagssterl2.jpg|thumb|This is the sample caption]]

This produces:

This is the sample caption

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

"thumb" keyword causes the image to be displayed with frame around it and reduces it to a thumbnail (thubmnail's size can be changed in user preferences). It also causes text to flow around the image for uninterrupted reading. Users can access the original image by clicking on the thumbnail.

If it's necessary to insert the image in it's original size while keeping the frame and caption, use the "frame" keyword instead of "thumb". Also insert the "none" keyword to prevent the extra spacing from being added to the left margin. Here is an example:

 [[Image:Clagssterl2.jpg|frame|none|This is the sample caption]]

This is the sample caption

Sometimes, the width of the original image may exceed the width of the text column (the example above exceeds it slightly). Below is an example of sizing the image to the text column width. Note that "frame" is only used when displaying the original-size image. If any scaling is involved, "thumb" is needed instead. In this case we want the thumb not to be the default size but a specific size, 635px which is the roughly the column width:

 [[Image:Clagssterl2.jpg|thumb|none|635px|This is the sample caption]]

This is the sample caption

Here is an example of how to scale the image to the column width but not have any borders or captions. The "thumb" keyword and caption text have simply been omitted. Note that the image is sized to 650px this time to compensate for the lack of borders.

 [[Image:Clagssterl2.jpg|none|645px|]]

It is possible to align thumbnails to the right margin instead of the default left. Here is an example:

 [[Image:Clagssterl2.jpg|thumb|left|This is the sample caption]]

This is the sample caption

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

Image Galleries

Below is an example of how to insert a gallery of image into a page:

<gallery Caption="Sample Caption">
Image:Clagssterl2.jpg
Image:Clagssterl2.jpg|The syntax allows for
Image:Clagssterl2.jpg|easy production of
Image:Clagssterl2.jpg|image galleries.
Image:Clagssterl2.jpg
Image:Clagssterl2.jpg
</gallery>

• Sample Caption
• 
• 

  The syntax allows for

• 

  easy production of

• 

  image galleries.

• 
• 

Notes for Power Users

If you are familiar with HTML, you may be tempted to insert images into pages directly by using image HTML tags (<img src="..." alt="..." />). Please use the wiki syntax provided above instead. There are several reasons for preferring the wiki usage.

• Standardized formatting with a border enforces consistency.
• Specifying a size via wiki syntax does not just change the apparent image size using HTML; it actually generates a resized version of the image on the fly and links to it appropriately. This happens whether or not you use size in conjunction with "thumb".
• This means the server does all the work of changing the image size, not the web browser of the user. By having the server do all the work means faster downloading of pages. It also means that larger images can be stored on the server without any slowdown by the browser (especially on dial up telephone lines.) Only the data for the actual size on the page is transmitted.
• From MediaWiki 1.5, the default thumbnail width can be set in the preferences, so it is recommended not to specify the pixel size when using "thumb" keyword, in order to respect the users' preferences (unless, for a special reason, a specific size is required regardless of preferences, or a size is specified outside the range of widths 120–300px that can be set in the preferences).

If you specify a "frame" option the image will not be scaled, and no size specifiers will be in the HTML. The image will be rendered at full size

When there are two or more "size" options ( [[Image:Westminstpalace.jpg|right|50px|80px]] ), only the last one is valid.

Placing Images Outside Text Column

To place an image in the white space to the right and outside of the text column required more complicated syntax, which involves HTML. Use the below example as a guide:

<div style="margin-left: 670px">[[Image:Clagssterl2.jpg|thumb|Sample Caption|]]</div>

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.

And without the borders:

<div style="margin-left: 670px">[[Image:Clagssterl2.jpg|right|200px|Sample Caption|]]</div>

text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.