Help:Images

How to upload an image

To upload an image click upload file in the toolbox at the left of the screen (or just go straight there), 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. A selection of copyright templates can be found here. Images lacking an appropriate copyright notice may be deleted.

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.

Using images from Wikimedia Commons

This image is not actually stored on RationalWiki. It is sourced from Wikimedia Commons.

There is no need to upload an image already hosted at Wikimedia Commons. When you include an image in an article, the page, when being loaded, will first check for an image of that name stored on RationalWiki. If no such image is found it will look for an image of that name hosted by Wikimedia Commons.

There is a risk inherent in this approach in that images at Wikimedia Commons are not controlled by RationalWiki, thus if the image is changed there it will also change in any RationalWiki pages that link to the image. When images get deleted from Wikimedia Commons, they are not automatically removed from RationalWiki pages and appear as broken file links instead. If you chose to upload an image to RationalWiki, choose a filename relevant to the image in question. The reason for this is that if the image at RationalWiki is deleted, but the pages linking to that article remain unchanged, the pages may load unsuitable images. For example, if Wikimedia Commons has an image named hotporn.jpg, and you upload an image of Richard Dawkins to RationalWiki, using that same filename, deletion of the Richard Dawkins image would lead to the Dawkins articles displaying the hotporn image from Wikimedia Commons.

Using this approach saves you time - in that you do not have to download, upload, and then add copyright notices to images used in this manner.

Placing an image on a page

Summary: [[File: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.)

[[File: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 (|).

Formatting

To define the formatting of the image use frame, thumb or frameless

[[File: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.

[[File: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.

[[File: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.

Back to top

Border

Border results in a very small gray border. [[File:Weaselly.jpg|border]] produces:

Back to top

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).

[[File: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.

[[File: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.

[[File: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 {{clear}} at the point required.)

Back to top

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

Back to top

Pixel size

The size of any image can be specified. In examples, we will use File:Stilton.jpg, an image with the native width of 200px and native height of 150px.

Width

Declaring the width in pixels is done by simply adding (size number)px. The height is adjusted proportionally automatically by this method.

Example:

[[File:Stilton.jpg|thumb|left|100px]] produces:

100px : 75px

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.

Height

Declaring the height in pixels is done by simply adding x(size number)px. The width is adjusted proportionally automatically by this method.

Example:

[[File:Stilton.jpg|thumb|left|x120px]] produces:

160px x 120px

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.

Width and height

Both width and height can be specified at the same time. The image will be scaled proportionally so that it fits within the specified rectangle.

Example:

[[File:Stilton.jpg|thumb|left|400x60px]] 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.

Specifying the size overrides the viewer's thumbnail size preference. Images specified with thumb or frameless should not have a pixel size for this reason.

Back to top

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.

[[Filee:Stalactite.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.

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.

[[File:Stalactite.jpg|thumb|upright]] 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.

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.

[[File:GISP2D1837.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.

[[File:GISP2D1837.jpg|thumb|left|upright=.5]] 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.

Values greater than 1.0 are also allowed.

[[File:GISP2D1837.jpg|thumb|left|upright=1.2]] 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.

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.

Back to top

Caption

A caption can be included in the frame (quotation marks are not required);

[[File:Stilton.jpg|frame|left|Cheese]] produces:

Cheese

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.

[[File:Stilton.jpg|thumb|center|100px|Cheese]] produces:

Cheese

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.

When the frame or thumb option is not used, the caption becomes the alt text.

[[File:Stilton.jpg|right|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.

Back to top

Alt text

Alt text is what appears instead of the image when the image is not displayed (e.g. if the viewer disables images).

[[File:Stilton.jpg|thumb|left|alt=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.

Back to top

Link

Clicking on an image usually takes you to its description page. The link option can be used to override this.

[[File:Stilton.jpg|20px|alt=Cheese|link=User:Toast]] produces which links to a page on RationalWiki.

[[Filee:Stilton.jpg|20px|alt=Cheese|link=http://www.example.org]] produces which links to an external webpage.

[[File:Stilton.jpg|20px|alt=Cheese|link=]] produces which cannot be clicked.

Note that link is ignored when thumb or frame is used.

Back to top

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:

• Buttons gallery
• 

  This Bolds
• 
• 

  Lets you add an image

• 

  Gives you an internal link

• 

  Slopes

• 
• 

  Doesn't appear to work.

• 

  But we've no media.

• 
• 

  Makes things
  [[Not Work]]

• 

Back to top

Image filtering

A disgusting picture of a pussy.

By default, images that are deemed "not safe for work" (NSFW) are filtered on RationalWiki so that they are not displayed when included on a page. They are, however, visible if you go to the file page, which is the default link that replaces the image.

Marking images NSFW

On the file page of the image itself place __NSFW__. Also to make these wonderful contents easier to find (purely for academic interest of course) add [[Category:NSFW]] to the image.

Displaying NSFW images

If you want to enjoy the full visual display of these images, you must first be logged in as a registered user. Then go to your preferences, click on the tab marked Appearance, check the box Display filtered images in the Files section, and then click save. You will now see all the disgusting, appalling images in their unfiltered glory wherever they occur.

See also

• Help:SVG images