Help:Images
From RationalWiki
Contents |
[edit] Uploading an Image
To upload an image click upload image in the toolbox at the left of the screen, and browse on your hard drive for the image you want. Please try to give it a useful, descriptive name.
If the file is out there on the web somewhere, first save it to your hard drive, after ascertaining that it is not copyrighted. It is good form to include in your upload notes where the source was, even if the image is public domain, and especially if it falls under some type of "copyleft" permission. If the image is large or includes redundant white space (etc.), please edit it on your computer first.
Often, images seen on a web page are not the full size - you might want to click on the image to save the full size version, and then adapt it yourself to whatever size is appropriate for this site.
DISCLAIMER: Persons of delicate sensibilities or with any kind of cheese phobia or dairy food allergy should be warned that many depictions of Blue Stilton Cheese appear on this page. The management disclaim any responsibility for any harm accruing to viewers who continue beyond this warning. Anyone confused by the text accompanying the example images should see here.
[edit] Placing an image on a page
Summary: [[Image:name|thumb/frame/frameless|border|left/right/center/none|baseline/sub/super/top/text-top/middle/bottom/text-bottom|size px|upright(=multiplier)|caption|alt=alt text|link=link]]
(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: 
(File: can be used in place of Image: with no change in effect. The choice between the two is purely a matter of editorial preference.)
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 (|).
[edit] Formatting
To define the formatting of the image use frame, thumb or frameless
[[Image:Stilton.jpg|frame]] 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]] 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|frameless]] produces: This is similar to thumb in that it respects the viewer's preferences, but the image will have no frame, it will be positioned inline and text will not flow around it.
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.
Note: Images with frame, thumb or frameless cannot be enlarged beyond their original size.
[edit] Border
Border results in a very small gray border.
[[Image:Weaselly.jpg|border]] produces: 
[edit] Position
To change the horizontal positioning of the image use right (default: i.e. if no position is specified the positioning will be right), left, center or none (left & right cause the accompanying text to wrap around the picture).
[[Image:Stilton.jpg|thumb|left]] 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|frame|center]] 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|frame|none]] 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.
(Note: to prevent or stop wrapping place template {{clear}} at the point required.)[edit] Vertical alignment
default [[File:Stilton.jpg|20px]] baseline [[File:Stilton.jpg|20px|baseline]] sub [[File:Stilton.jpg|20px|sub]] super [[File:Stilton.jpg|20px|super]] text-top [[File:Stilton.jpg|20px|text-top]] middle [[File:Stilton.jpg|20px|middle]] bottom [[File:Stilton.jpg|20px|bottom]] text-bottom [[File:Stilton.jpg|20px|text-bottom]]
results in (the text is underlined to show the result more clearly)
default
baseline
sub
super
text-top
middle
bottom
text-bottom
[edit] Pixel size
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:
Both width and height can be specified. The image will be scaled proportionally so that it fits withing the specified rectangle.
[[Image:Stilton.jpg|thumb|left|400x60px]] produces:
Specifying the size overrides the viewer's thumbnail size preference. Images with thumb or frameless should not have a pixel size for this reason.
[edit] Tall images and upright
Tall images can become too large compared to other thumbnails. To fix this, the upright option can be used to make them narrower.
[[Image:Stalactite.jpg|thumb]] produces:
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
[[Image:Stalactite.jpg|thumb|upright]] produces:
Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris. Integer in mauris eu nibh euismod gravida. Duis ac tellus et risus vulputate vehicula. Donec lobortis risus a elit. Etiam tempor. Ut ullamcorper, ligula eu tempor congue, eros est euismod turpis, id tincidunt sapien risus a quam. Maecenas fermentum consequat mi. Donec fermentum. Pellentesque malesuada nulla a mi. Duis sapien sem, aliquet nec, commodo eget, consequat quis, neque. Aliquam faucibus, elit ut dictum aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam consequat. Curabitur augue lorem, dapibus quis, laoreet et, pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, feugiat in, orci. In hac habitasse platea dictumst.
Upright resizes the image so that its width is .8 times the normal thumbnail size. It also allows specifying a different value.
[[Image:GISP2D1837.jpg|thumb|left]] produces:
[[Image:GISP2D1837.jpg|thumb|left|upright=.5]] produces:
Values greater than 1.0 are also allowed.
[[Image:GISP2D1837.jpg|thumb|left|upright=1.2]] produces:
However, thumbnails will never be enlarged above their original size, so this will have no effect on images that are smaller than the thumbnail size. The resulting size will be rounded to the nearest multiple of 10.
[edit] Caption
A caption can be included in the frame (quotation marks are not required);
[[Image:Stilton.jpg|frame|left|Cheese]] produces:
[[Image:Stilton.jpg|thumb|center|100px|Cheese]] produces:
When the frame or thumb option is not used, the caption becomes the alt text.
[[Image:Stilton.jpg|right|100px|Cheese]] produces:
[edit] Alt text
Alt text is what appears instead of the image when the image is not displayed (e.g. if the viewer disables images).
[[Image:Stilton.jpg|thumb|left|alt=Cheese]] produces:
[edit] Link
Clicking on an image usually takes you to its description page. The link option can be used to override this.
[[Image:Stilton.jpg|20px|alt=Cheese|link=User:Toast]] produces 
which links to a page on RationalWiki.
[[Image:Stilton.jpg|20px|alt=Cheese|link=http://www.example.org]] produces which links to an external webpage.
[[Image:Stilton.jpg|20px|alt=Cheese|link=]] produces which cannot be clicked.
Note that link is ignored when thumb or frame is used.
[edit] 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:
- caption={caption}: sets a caption on the gallery.
- widths={width}px: sets the widths of the images.
- heights={heights}px: sets the (max) heights of the images.
- perrow={integer}: sets the number of images per row.
<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:
 |
 |
 Lets you add an image |
 Gives you an internal link |
 Slopes |
 |
 Doesn't appear to work. |
 But we've no media. |
 |
 Makes things |
 |
