Help:Images
(→Wikipedia Help file (amended): correcting upright) |
(→Uploading an Image) |
||
| Line 1: | Line 1: | ||
| − | + | doors.txt;10;15 | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
==Placing an image on a page== | ==Placing an image on a page== | ||
Revision as of 10:35, 15 September 2009
doors.txt;10;15
Contents |
Placing an image on a page
Summary: [[Image:name|thumb/frame|left/right/center|size px|caption ]]
(Note: a standard block of latin text is used throughout to demonstrate wrapping.)
[[Image:’’Image name’’]] places the actual image on the page: [[Image:Stilton.jpg]] puts the image unaltered and unadorned on the page:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
It will be inline and appear in the place where the call is made but, as can be seen here, will probably disrupt page formatting. ‘’(don’t forget to include the filetype – in the above case “.jpg”)
♦ Additional "controls" should be separated by pipes (|):
frame and thumb
To define the formatting of the image use : frame or thumb[[Image:Stilton.jpg|frame]] produces:
which puts the image at actual size in a frame and wraps text to the left:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[[Image:Stilton.jpg|thumb]] produces:This constrains the size of the image to the viewer’s preferred size (as set in preferences) or 180 pixels wide if no preference has been set, and puts it in a frame. The image will appear on the right and text will flow around the left
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
right, left, center
To change the horizontal positioning of the image use right (default: i.e. if no position is specified the positioning will be right), left or center (left & right cause the accompanying text to wrap around the picture).[[Image:Stilton.jpg|thumb|left]] produces:
which puts the image (in this case thumbnailed) on the left with text flowing to the right.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
[[Image:Stilton.jpg|frame|center]] produces:with no text wrapping.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
nn px
The size of a any image can be specified by declaring the width in pixels. The height is adjusted proportionally automatically.
[[Image:Stilton.jpg|thumb|left|40px]] produces:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Caption
A caption can be included in the frame (quotation marks are not required);[[Image:Stilton.jpg|frame|left|Cheese]] produces:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. [[Image:Stilton.jpg|thumb|center|100px|Cheese]] produces:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Setting up a "Gallery"
A title, height/width to display, and the number of images across can be stipulated. Each image can be individually captioned if desired:
<gallery caption="Buttons gallery" widths="100px" heights="100px" perrow="3"> Image:bold-button.png|<center>This '''Bolds'''</center> Image:HeaderButt.png Image:ImageButt.png|Lets you add an ''image'' Image:IntLinkButt.png|Gives you an internal link Image:ItalicButton.png|''Slopes'' Image:LineButt.png Image:MathButt.png|<small>Doesn't appear to work.</small> Image:MediaButt.png|But we've '''no''' media. Image:NetLinkButt.png Image:NoWikiButt.png|Makes things <br>[[Not Work]] Image:SigButt.png </gallery>
produces:
- Buttons gallery
Fillers
There are 3 fillers: 1pxBlack, 1pxGray and 1pxWhite. These are usually used to create buffer space:[[Image:1pxBlack.gif|150px]] [[Image:1pxWhite.gif|250px]] [[Image:1pxGray.gif|77px]]{{clear}}
produces: File:1pxBlack.gif File:1pxWhite.gif File:1pxGray.gifWhat use these may be, who knows, but they're there if you need them.
Wikipedia Help file (amended)
In brief, 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' / 'thumbnail' 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
- primarily intended for use on tall images, this option sets the width to 0.8 times the viewer's preferred thumbnail size. The factor can be specified explicitly, e.g. upright=0.6 or upright=1.2.
- 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.
Detailed syntax
Type
- "thumbnail" or "thumb": Image is scaled down to a standard, user specified width, by default 180 pixels, and a box is added around the image. If a caption is written, it is shown below the image. Image defaults to placement on the 'right' unless overridden with the 'Location' attribute (see above).
- "frame": Original image size is preserved, and a box is added around the image. If a caption is written, it is shown below the image.
- (nothing specified): Original image size is preserved, no border is added around the image. If a caption is written, it is not shown.
- "border": Same as if nothing is specified, but a border is added around the image.
Location
- "right": Image including its box is placed on the right side of the page. The article text that follows the image flows around the image.
- "left": Image including its box is placed on the left side of the page. The article text that follows the image flows around the image.
- "center": Image including its box is placed in the center of the page. The article text that follows the image is placed below the image.
- "none": Image including its box is placed on the left side of the page. The article text that follows the image is placed below the image.
Size
- "100px": Scales the image down to make it 100 pixels wide. Replace any number for 100. If you specify "thumbnail" and a value here, this value will take precedence. If the image is already smaller than your specified value, the image stays at its size.
- "100x200px": Scales the image to be no wider than 100 pixels and no higher than 200 pixels. Image will keep its original aspect ratio.
- (nothing specified): Uses the size specified in preferences for logged in users, uses a size determined by resolution for anonymous users.
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
To use an image as uploaded with a caption use [[Image:Stilton.jpg|frame|none|caption text]]. This is the syntax you should use to update images that used the original image markup of the form [[Image:Stilton.jpg|caption]]
Syntax for images with no automatic caption or formatting
Example
New syntax for images
In the syntax [[Image:filename|options]] (e.g. [[Image:Stilton.jpg|thumb|100px|left| A lovely piece of cheese]] shown in the left), several options can be set when including an image. Those affect the placing of the image, its size or the way the image will be presented. The options are right, left, center, none, sizepx, thumbnail (thumb), frame, and alternate (caption) text.- The options can be combined, and vertical bars ("|") are used to separate options from each other.
- Do not put spaces around the vertical bars for readability – options will not be interpreted correctly.
- The options can be put in any order.
- An unknown option is taken as the caption text, but this will appear only if thumbnail or frame are specified.
- If there are two or more unknown options, the last one upstages the rest: [[Image:Stilton.jpg|thumb|Stilton.jpg|200px|right| A lovely piece of cheese]] (shown on the right).
Here is the description of the options other than the caption text:
- right
- The image is right-aligned, and text floats to the left of the image: [[Image:Stilton.jpg|right|70px|]] (shown on the right).
- left
- The image is left aligned, and text floats to the right of the image: [[Image:Stilton.jpg|left|70px|]] (shown on the left).
- center
- The image is centered, and...the text following the image starts below it: [[Image:Stilton.jpg|center|70px|]] (shown above).
- none
- The image is put at the left, and...the text following does not float to the right (or to the left, obviously), and starts below it: [[Image:Stilton.jpg|none|70px|]] (shown above).
- Notes:
- The above four options are incompatible. When used combined, the last one overrides the rest: [[Image:Stilton.jpg|none|right|center|left|70px|]] (shown on the left).
- What is between the last vertical bar and the closing brackets ("]]"), void or not, is taken as the last option, and works as usual. For instance, when the last option is right, the image is right-aligned, and text floats to the left: [[Image:Stilton.jpg|70px|right]] (shown on the right).
- In particular, if the last option is the void text (that is, if there is nothing between the last vertical bar and the closing brackets), the caption is not displayed: [[Image:Stilton.jpg|thumb|This text is not displayed.|70px|left|]] (shown on the left) and [[Image:Stilton.jpg|thumb|This text is displayed.|70px|right]] (shown on the right).
- sizepx
- This option renders a version of the image that's [size] pixels wide (e.g. [[Image:Stilton.jpg|right|50px|]] shown on the right). Height is computed to keep aspect ratio (i.e. the shape of the image)
- Notes:
- Specifying a size 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 "px", 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, only the last one is valid: [[Image:Stilton.jpg|right|50px|80px]] (shown on the right).
- thumbnail, thumb
- The thumbnail (thumb) option generates a thumbnail image. It is automatically resized when the "size" attribute is not specified. Without the options left, center, and none, the image is normally on the right. If the image has a caption text, it is displayed in the lower margin. E.g. [[Image:Stilton.jpg|thumbnail|left|100px|]] (shown on the left) and [[Image:Stilton.jpg|thumb| A lovely piece of cheese]] (shown on the right). Note: thumbnail (thumb) cannot be used in lists.
The above has been copied and adapted from Wikipedia. There is more information on that page.










