Help:Images

From OutHistory

(Difference between revisions)
Jump to: navigation, search
(image help)
(Added image help)
Line 13: Line 13:
; Caption : Any element which cannot be identified as one of the above is assumed to be caption text.
; Caption : Any element which cannot be identified as one of the above is assumed to be caption text.
-
==Syntax to use an image in uploaded size, with a caption==
+
==Examples==
-
To use an image as uploaded with a caption use <code><nowiki>[[Image:Westminstpalace.jpg|frame|none|caption text]]</nowiki></code>. This is the syntax you should use to update images that used the original image markup of the form <code><nowiki>[[Image:Westminsterpalace.jpg|caption]]</nowiki></code>
+
Most images on OutHistory should be inserted like this:
-
[[Image:Clagssterl2.jpg|frame|none|caption text]]
+
  <nowiki>[[Image:Clagssterl2.jpg|thumb|This is the sample caption]]</nowiki>
-
==Syntax for images with no automatic caption or formatting==
+
This produces:
-
The old syntax for images without captions is <tt><nowiki>[[Image:Westminstpalace.jpg|alt text]]</nowiki></tt>. This is rendered inline, and the specified text is used as the image's ''alt'' attribute (alternate text for programs which cannot display images, such as screen readers) and as the ''title'' attribute (supplementary text, often displayed as a tool tip when the mouse is over the image).
+
[[Image:Clagssterl2.jpg|thumb|This is the sample caption]]
-
See [[Wikipedia:Image markup with HTML]] for an old, deprecated, way of putting a caption under the image using HTML code.  Please use the new way of associating captions with images, as described on this page.
+
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text.
-
See [[Wikipedia:Captions]] for discussion of appropriate caption text. See [[Wikipedia:Alternative text for images]] for discussion of appropriate alt text. Unfortunately, it is not possible to specify different text for these two purposes.
+
"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.
-
===Example===
+
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|alt text]]
+
  <nowiki>[[Image:Clagssterl2.jpg|frame|none|This is the sample caption]]</nowiki>
 +
 
 +
[[Image:Clagssterl2.jpg|frame|none|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:
 +
 
 +
  <nowiki>[[Image:Clagssterl2.jpg|thumb|none|635px|This is the sample caption]]</nowiki>
 +
 
 +
[[Image:Clagssterl2.jpg|thumb|none|635px|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.
 +
 
 +
  <nowiki>[[Image:Clagssterl2.jpg|none|645px|]]</nowiki>
 +
 
 +
[[Image:Clagssterl2.jpg|none|645px|]]
 +
 
 +
 
 +
It is possible to align thumbnails to the right margin instead of the default left. Here is an example:
 +
 
 +
  <nowiki>[[Image:Clagssterl2.jpg|thumb|left|This is the sample caption]]</nowiki>
 +
 
 +
[[Image:Clagssterl2.jpg|thumb|left|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:
 +
 
 +
<nowiki><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></nowiki>
 +
 
 +
 
 +
<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>
 +
 
 +
==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 (&lt;img src="..." alt="..." /&gt;). 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 ( <nowiki>[[Image:Westminstpalace.jpg|right|50px|80px]]</nowiki> ), only the last one is valid.
 +
 
 +
[[Category:Help Pages]]

Revision as of 15:23, 22 April 2008

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|]]
Clagssterl2.jpg


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>


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.

Personal tools