Help:Images

This page gives detailed instructions on uploading images and how to insert them into articles.

Uploading an image

1. In the sidebar, under “toolbox”, click “Upload file.”
2. Select the “Source filename”
3. You can fill in the optional “Summary” text. Note: This is a plain text summary, not wikitext.

Quick start

Image caption

This wiki markup:

[[File:Camera-photo.svg|thumbnail|100px|Image caption]]

Displays image in frame, right adjusted, with caption.

Supported media types for images

The following file formats are supported on Nottinghack Wiki:

• .jpg or .jpeg : bitmap image compressed in the standard JPEG format (this lossy format is most suitable for photographs).
• .png : bitmap image in the Portable Network Graphics format (specified by the W3 Consortium).
• .gif : bitmap image in the legacy Graphics Interchange Format.
• .svg : scalable image in the Scalable Vector Graphics format (specified by the W3 Consortium).

After you upload a file, you will be redirected to the “file description page”. You should edit this page to provide more information about the file. For example, you should explain where you got the file from, and what its copyright status is.

Displaying an image

The wikitext to display an image is:

[[File:filename.extension|options|caption]]

The options can be given in any order separated by pipes (|):

border

Adds a very thin border around the image.

frame, frameless, thumb or thumbnail

Controls how the image is formatted and embedded in the rest of the page. See the examples of image formats.

{width}x{height}px

Resizes the image to fit inside a maximum {width} and {height} in pixels. See the examples of image resizing.

Note: The image will always retain its aspect ratio.

{width}px

Resizes the image using a maximum width in pixels.

x{height}px

Resizes the image using maximum height in pixels.

upright

Uses a resizing algorithm suitable for images in portrait orientation rather than landscape.

left, right, center, or none

Controls the horizontal alignment (and inline/block or floating styles) of the image within a text (no default value).

baseline, sub, super, top, text-top, middle, bottom, or text-bottom

Controls the vertical alignment of a non-floating inline image with the text before or after the image, and in the same block (the default vertical alignment is middle).

link={target}

Allows to change the target of the generated link associated with the image. See Altering the default link target.

Note: link does not work with thumb, thumbnail or frame.

alt={alternative text}

Defines the alternative text (maps to the HTML alt="..." attribute).

page={number}

Renders the specified page number (only applicable when showing a .djvu or .pdf file).

If a parameter does not match any of the other possibilities, it is assumed to be the caption text. Caption text is shown below the image in thumb and frame formats, or as mouseover text in border and frameless formats or when the format is omitted. Caption text displayed in the thumb and frame formats may contain wiki links and other formatting. In the other options, wiki-formatting will not work. If no caption text is supplied, a caption is automatically created showing the file name. To completely remove the caption, set it to <span title=""></span>.

Image dimensions and borders

The effect of the size parameters depend on how the image is formatted, but images will always retain their aspect ratio. When the format is not specified the image can be reduced or enlarged to any size. An image with the frame format always ignores the size specification and the original image will be reduced if it exceeds a maximum size. The size of an image with the thumb format can be reduced, but can not be enlarged beyond the original image size unless it is a scalable media type.

In the examples below, the original size of the image is 400 × 267 pixels.

Format	You type	You get

Horizontal alignment

Note that when using the frame or thumb[nail] formats, the default horizontal alignment will be right.

Description	You type	You get

Vertical alignment

The vertical alignment options take effect only if the image is displayed as an inline element and is not floating. They alter the way the inlined image will be vertically aligned with the text present in the same block before and/or after this image on the same row. Note that the displayed line of text where inline images are inserted (and the lines of text displayed after the current one) may be moved down. The line spacing will increase, just as may occur with spans of text with variable font sizes to allow the image height to be fully displayed with this alignment constraint.

To show the alignment result more clearly in this example, the text spans are overlined and underlined, the line-height is increased and emphasized with a yellow background and grey border:

text top: text

text text-top: text

text ^super: text

text baseline: text

text _sub: text

text default: text

text middle: text

text text-bottom: text

text bottom: text

Source code for the example above

<p style="border:1px solid #AAA;background:#FFC;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''top:''' [[File:Example.jpg|20px|top]] [[File:Example.jpg|40px|top]] [[File:Example.jpg|40px|border|top]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;background:#FFC;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-top:''' [[File:Example.jpg|20px|text-top]] [[File:Example.jpg|40px|text-top]] [[File:Example.jpg|40px|border|text-top]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;background:#FFC;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sup>super:</sup> [[File:Example.jpg|20px|super]] [[File:Example.jpg|40px|super]] [[File:Example.jpg|40px|border|super]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;background:#FFC;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''baseline:''' [[File:Example.jpg|20px|baseline]] [[File:Example.jpg|40px|baseline]] [[File:Example.jpg|40px|border|baseline]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;background:#FFC;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sub>'''sub:'''</sub> [[File:Example.jpg|20px|sub]] [[File:Example.jpg|40px|sub]] [[File:Example.jpg|40px|border|sub]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;background:#FFC;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''default:''' [[File:Example.jpg|20px]][[File:Example.jpg|40px]] [[File:Example.jpg|40px|border]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;background:#FFC;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''middle:''' [[File:Example.jpg|20px|middle]] [[File:Example.jpg|40px|middle]] [[File:Example.jpg|40px|border|middle]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;background:#FFC;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-bottom:''' [[File:Example.jpg|20px|text-bottom]] [[File:Example.jpg|40px|text-bottom]] [[File:Example.jpg|40px|border|text-bottom]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;background:#FFC;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''bottom:'' [[File:Example.jpg|20px|bottom]] [[File:Example.jpg|40px|bottom]] [[File:Example.jpg|40px|border|bottom]]
<del>text</del></u></span></p>

Stopping the text flow

On occasion it is desirable to stop text (or other inline non-floating images) from flowing around a floating image. Depending on the web browser's screen resolution and such, text flow on the right side of an image may cause a section header (for instance, == My Header ==) to appear to the right of the image, instead of below it, as a user may expect. The text flow can be stopped by placing <br style="clear: both" /> before the text that should start below the floating image.

All images displayed as blocks (including non-floating centered images, left- or right-floating images, as well as framed or thumbnailed floating images) are implicitly breaking the surrounding lines of text (terminating the current block of text before the image, and creating a new paragraph for the text after them). They will then stack vertically along their left or right alignment margin (or along the center line between these margins for centered images).

Altering the link target

The table below shows how to alter or remove the link target associated with an image. Note: The link attribute does not work with thumb or frame formats.

Description	You type	You get

Displaying an image gallery

It's easy to make a gallery of thumbnails with the <gallery> tag:

<gallery>
Image:file_name.ext|caption
Image:file_name.ext|caption
{...}
</gallery>

Note that the image code is not enclosed in quare brackets inside gallery tags. Captions are optional, and may contain wiki links or other formatting. For example:

<gallery>
File:Example.jpg|Item 1
File:Example.jpg|a link to [[Help:Contents]]
File:Example.jpg
File:Example.jpg
File:Example.jpg| ''italic caption''
File:Example.jpg|on page "{{PAGENAME}}"
</gallery>

Is displayed as:

• 

  Item 1

• 

  a link to Help:Contents

• 
• 
• 

  italic caption

• 

  on page "Images"

Optional gallery attributes

The gallery tag itself takes several additional parameters, specified as attribute name-value pairs:

<gallery {parameters}>
{images}
</gallery>

• caption={caption}: A caption for the gallery.
• widths={width}px: The maximum width for the images. Note the plural (widths)
• heights={heights}px: The maximum height for the images.
• perrow={integer}: The number of images per row.
• showfilename={y or n}: Show the filenames in the image captions.

Example wikitext:

<gallery widths=60px heights=60px perrow=7 caption="sunflowers are groovy">
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
</gallery>

Result:

• sunflowers are groovy
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Linking to an image without displaying it

Link to the description page

If you put a colon (:) before File:, the image will not be embedded and the link will lead to the description page of the file.

Description	You type	You get
Link to the description page of the file	[[:{{ns:image}}:Example.jpg]]	File:Example.jpg
Link to the description page with a custom title.	[[:{{ns:image}}:Example.jpg|Sunflowers]]	Sunflowers

Link directly to the media file

You can use the pseudo-namespace “Media” to link directly to a file without displaying it, bypassing the description page.

Description	You type	You get
Link directly to a file.	[[{{ns:media}}:Example.jpg]]	Media:Example.jpg
Link directly to a file, with a custom title.	[[{{ns:media}}:Example.jpg|Sunflowers]]	Sunflowers
link to a potential file, even if it doesn't exist.	[[{{#special:Filepath}}/Example.jpg]]	Special:FilePath/Example.jpg
Generate an external URL to the file	{{FILEPATH:Example.jpg}}	https://wiki.nottinghack.org.uk/images/a/a9/Example.jpg

Displaying images from other websites

Currently it is not possible to embed images from other websites into Nottinghack Wiki. Links are displayed instead. External image embedding could be enabled using mw:Manual:$wgAllowExternalImages.

Description	You type	You get
Link or embed an image from another website	http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png	http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png