Help:Images
- See also: Help:Contents
This page gives detailed instructions on uploading images and how to insert them into articles.
Uploading an image
- Main article: Help:Uploading images
- In the sidebar, under “toolbox”, click “Upload file.”
- Select the “Source filename”
- You can fill in the optional “Summary” text.
Note: This is a plain text summary, not wikitext.
Quick start
Wiki markup for displaying image in frame, right adjusted, with caption.
[[File:Camera-photo.svg|thumbnail|100px|Drawing of a camera.]]
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,thumborthumbnail- 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, ornone- 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, ortext-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:
linkdoes not work withthumb,thumbnailorframe. 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 |
|---|---|---|
| (not specified) |
[[File:MediaWiki:Image sample|50px]] |
|
[[File:MediaWiki:Image sample|500px]] |
| |
| border |
[[File:MediaWiki:Image sample|border|50px]] |
|
[[File:MediaWiki:Image sample|border|500px]] |
| |
| frame |
[[File:MediaWiki:Image sample|frame|50px]] |
 |
[[File:MediaWiki:Image sample|frame|500px]] Note: The size parameters have no effect when using the frame format. |
| |
| thumb |
[[File:MediaWiki:Image sample|thumb|50px]] |
|
[[File:MediaWiki:Image sample|thumb|500px]] Note: A thumb image cannot be enlarged beyond the size of the original image. |
| |
| frameless |
[[File:MediaWiki:Image sample|frameless|50px]] |
|
[[File:MediaWiki:Image sample|frameless|500px]] Note: A frameless image cannot be enlarged beyond the size of the original image. |
|
Horizontal alignment
Note that when using the frame or thumb[nail] formats, the default horizontal alignment will be right.
| Description | You type | You get |
|---|---|---|
| no horizontal alignment specified, or default alignment Rendered as a floating block: no Rendered inline: yes |
text before [[File:example.jpg|100px|caption]] text after |
text before |
| specify horizontal alignment as: none Rendered as a floating block: no Rendered inline: no |
text before [[File:example.jpg|none|100px|caption]] text after |
text before |
| specify horizontal alignment as: center Rendered as a floating block: no Rendered inline: no |
text before [[File:example.jpg|center|100px|caption]] text after |
text before |
| specify horizontal alignment as: left Rendered as a floating block: yes Rendered inline: no |
text before [[File:example.jpg|left|100px|caption]] text after |
text before |
| specify horizontal alignment as: right Rendered as a floating block: yes Rendered inline: no |
text before [[File:example.jpg|right|100px|caption]] text after |
text before |
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:
texttop:
text
texttext-top:text
textsuper:text
textbaseline:text
textsub:text
textdefault:text
textmiddle:text
texttext-bottom:text
textbottom:textSource 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 |
|---|---|---|
| internal link |
[[File:example.jpg|link=Main Page|caption]] |
|
| external link |
[[File:example.jpg|link=http://wikipedia.org|caption]] |
|
| no link (external or file page) |
[[File:example.jpg|link=|caption]] |
|
Displaying an image gallery
- See also: Wikipedia:Help:Gallery tag
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]]
|
|
| Link to the description page with a custom title. | [[:{{ns:image}}:Example.jpg|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]]
|
|
| Link directly to a file, with a custom title. | [[{{ns:media}}:Example.jpg|Sunflowers]]
|
|
| link to a potential file, even if it doesn't exist. | [[{{#special:Filepath}}/Example.jpg]]
|
|
| Generate an external URL to the file | {{FILEPATH: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.