User:CS2012/Books/Collaborative E-book creation using Wikipedia/Visual file markup

The best markup for adding an image to a page in most situations is

[[File:Example.jpg|thumb|alt=Alternative text|Caption text]]

File markup begins with the filename, preceded by the File:. Each of the optional following codes must be separated with a pipe (|). Codes may be in any order – with the exception of the caption, which should be last.

File types

Before a file can be used, it must be uploaded to either Wikipedia or the Wikimedia Commons sister project. Uploading to Commons is recommended as files can be used by other sister projects. Files being used under fair use provisions must be stored on Wikipedia. The markup is the same regardless of where it is uploaded.

The following visual file types may be uploaded:

Image formats

jpg/jpeg – recommended for photographic images.
svg – a vector format recommended for drawings and line-art illustration.
png – recommended for non-vector iconic images.
gif

Mixed content formats

pdf
djvu

Display modes

Basic mode

A file in basic mode does not specify a display mode. Files are displayed at full size by default. Images are displayed inline unless a horizontal alignment is specified.

Thumbnail mode

A file in thumbnail mode uses the codes thumb or thumbnail. This will display a thumbnail with a caption. Default size is 220 pixels wide unless the full size file is smaller. Registered users can specify their own default size if they wish. In normal circumstances, images are scaled down automatically by Wikipedia's server.

Framed mode

A file in framed mode uses the codes frame or framed. This will display the file at full size with a caption. Because files are not scaled down, framed mode is not appropriate for large images, but is a good choice for video – provided the video is not too large.

Frameless mode

An file in frameless mode uses the code frameless. This will display a thumbnail without a caption. Default size is 220 pixels wide unless the full size file is smaller. Unlike thumbnail mode, images are displayed inline unless a horizontal alignment is specified.

Adjusting properties

Caption

Text entered at the end of the markup is used as a caption. It does not require a code. Links and normal text formatting options can be used in captions too.

[[File:Example.png|thumb|alt=Example alt text|Example caption]]

Horizontal alignment

Position the file to the right.

[[File:Example.png|right|alt=Example alt text]]

Position the file to the left.

[[File:Example.png|left|alt=Example alt text]]

Position the file in the centre. Text will not flow around the file.

[[File:Example.png|center|alt=Example alt text]]

Position the file to the left. Text will not flow around the file.

[[File:Example.png|none|alt=Example alt text]]

Size

Files will keep their original aspect ratio. In normal circumstances, images are scaled down automatically by Wikipedia's server.

Specify a size

Scale the file to make it the specified number of pixels in width (e.g. 100px).

[[File:Example.png|Widthpx|alt=Example alt text]]

Scale the file to make it the specified number of pixels in height (e.g. x150px).

[[File:Example.png|xHeightpx|alt=Example alt text]]

Scale the file to be no wider and no higher than the specified number of pixels (e.g. 100x150px).

[[File:Example.png|WidthxHeightpx|alt=Example alt text]]

Add alt text

Specify the alt text for the image. This is intended for visually impaired readers. See WP:ALT for how this typically should differ from the caption.

[[File:Example.png|alt=Example alt text]]

Links

Ordinarily, a file will include a hyperlink to its description page, a page with information about the file itself. The options below allow the link to point to a different page or to be disabled. For images, the link is the image itself. Videos include an information icon below the video.

Unless the file is public domain attribution must be provided in some other fashion. See Wikipedia:Images linking to articles for more information.

Add a border

Add a one-pixel border around the file. This can be useful when it is important to distinguish a file from the background. Consider using thumb or frame instead.

[[File:Example.png|border|alt=Example alt text]]

Vertical alignment

Images must be placed inline. File:Flag of Hungary vertical.svg is used as an example.

Align the bottom of the image with the baseline of the text.

[[Image:Flag of Hungary vertical.svg|baseline|7px|link=|alt=]]

(This is the default.) Align the vertical middle of the image with the baseline of the text plus half the x-height of the text, so that the image is vertically centered around a lower case "x" in the text.

[[Image:Flag of Hungary vertical.svg|middle|7px|link=|alt=]]

Align the bottom of the image to the same level that the bottom of a subscript would be, such as the bottom of the "2" in "X₂".

[[Image:Flag of Hungary vertical.svg|sub|7px|link=|alt=]]

Align the bottom of the image to the same level that the bottom of a superscript would be, such as the bottom of the "2" in "X²".

[[Image:Flag of Hungary vertical.svg|super|7px|link=|alt=]]

Align the top of the image to the top of the text. This is often a bit higher than the top of a capital letter, because of ascenders in letters like lower-case "h".

[[Image:Flag of Hungary vertical.svg|text-top|7px|link=|alt=]]

Align the bottom of the image to the bottom of the text. This is somewhat lower than the baseline, because of descenders in letters like lower-case "y".

[[Image:Flag of Hungary vertical.svg|text-bottom|7px|link=|alt=]]

Align the top of the image to the top of the line containing the text. Normally this is slightly higher than the top of the text, to make space between lines of text.

[[Image:Flag of Hungary vertical.svg|top|7px|link=|alt=]]

Align the bottom of the image to the bottom of the line containing the text. Normally this is slightly lower than the bottom of the text.

[[Image:Flag of Hungary vertical.svg|bottom|7px|link=|alt=]]

Change the image displayed

Initial still image

Thumbtime of 27 seconds specified to show the title.

Use the frame from the video at the given time as the initial still image. Without a thumbtime parameter, a frame from the midpoint of the video is used. Time takes the form of hours, minutes and seconds separated by colons. For example:

thumbtime=21 – Time syntax using seconds only
thumbtime=0:23 – Time syntax using minutes and seconds
thumbtime=0:0:33 – Time syntax using hours, minutes and seconds

[[File:Example.ogg|thumbtime=Time|alt=Example alt text]]

Online link

Wikipedia:Extended image syntax