Help:Images

From Avon Lake Wiki
Jump to: navigation, search

This page explains the image syntax when editing the wiki. You or another user must upload an image before you can use it on a page.

Images that are stored on the wiki servers are usually rendered by using the File: namespace prefix (e.g.File:Image.jpg) as the target of a MediaWiki link. The alternate Media: namespace prefix is also usable to reference the original media file content.

Supported media types for images

The following file formats are supported on this wiki:

  • .jpg or .jpeg : compressed bitmap image (recommended)
  • .png : non-compressed bitmap image
  • .gif : legacy bitmap image format
  • .svg : scalable image
  • .ogg : multimedia
  • .pdf : multipaged documents
  • .ico : icons

Rendering a single image

Syntax

The full syntax for displaying an image is: [[File:filename.extension|options|caption]]

where options can be zero or more of the following, separated by pipes (|):

  • Format option: one of border and/or frameless, frame, thumb;
    Controls how the rendered image is formatted and embedded in the rest of the page.
  • Resizing option: one of
    • [width]px — Resizes the image to fit within the given maximum width in pixels, without restricting its height;
    • x[height]px — Resizes the image to fit within the given maximum height in pixels, without restricting its width;
    • [width]x[height]px — Resizes the image to fit within the given width and height in pixels;
    • upright — Resizes an image to fit within reasonable dimensions, according to user preferences (suitable for images whose height is larger than width).
    Note that the image will always retain its aspect ratio, and can only be reduced in size unless it's in a scalable media type (bitmap images cannot be scaled up).
    The default maximum size depends on the format and the internal image dimensions (according to its media type).
  • Horizontal alignment option: one of left, right, center, none;
    Controls the horizontal alignment (and inline/block or floating styles) of the image within a text.
  • Vertical alignment option: one of baseline, sub, super, top, text-top, middle, bottom, 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 is middle).
  • Link option: one of
    • link=[target] — Allows to change the target (to an arbitrary page title, or URL) of the generated link, activable on the rendered image surface; e.g. [[File:Example.jpg|20px|link=http://www.wikipedia.org]]
    • link= (with an empty value) - displays an image without a link
  • Page option: one of
    • page=[number] — Renders the specified page number (only applicable when showing a .pdf file).

If a parameter does not match any of the above possibilities, it is assumed to be the caption text.

Format

The following table shows the effect of some available formats.

When the height of an image in thumbnail is bigger than its width (i.e. in portrait orientation rather than landscape) and you find it too large, you may try the option upright=N, where N is the image's aspect ratio in decimal form. The alternative is to specify the desired maximum height (in pixels) explicitly.

You can use thumb=[filename], to show a different image for the thumbnail.

Size

Among different formats, the effect of the size parameter may be different, as shown below.

  • For how it appears when its size is not specified, see Format section above.
  • When the format is not specified, or only bordered, the size can be both reduced and enlarged to any specified size.
  • An image with frame always ignores the size specification, the original image will be reduced if it exceeds the maximum size defined in user preferences.
  • The size of an image with thumb can be reduced, but can not be enlarged beyond the original size of the image.
Reduced Enlarged
You Type
[[File:Example.jpg|50px]]
[[File:Example.jpg|200px]]
You get Example.jpg Example.jpg

Alignment

  • Note that when using the frame or thumb formats, the default horizontal alignment will be right.
  • The vertical alignment options take effect only if the image is rendered as an inline element and is not floating.
  • Note that the rendered line of text where inline images are inserted (and the lines of text rendered after the current one) may be moved down to allow the image height to be fully displayed with this alignment constraint.
Description You type You get
none specified
... text text text
[[File:example.jpg|caption]]
text text text ...
... text text text

caption text text text ...

  • center (horizontal),
  • middle (vertical)
... text text text
[[File:example.jpg|center|middle|caption]]
text text text ...
... text text text
caption

text text text ...

  • left
  • bottom
... text text text
[[File:example.jpg|left|bottom|caption]]
text text text...
... text text text
caption

text text text...

  • right
  • top
... text text text
[[File:example.jpg|right|top|caption]]
text text text...
... text text text
caption

text text text...

Notes:

  1. The "middle" vertical alignment position of the image (which is also the default) usually refers to the middle between the x-height and the baseline of the text, but not to the middle of the line-height of the font-height
  2. However, if the image height causes its top or bottom position to go above or below the normal full line-height of text, the middle position will be adjusted after the increasing the top and/or bottom line-margins so that the image can fit and align properly, and all images will be vertically centered on the adjusted middle position
  3. The "text-top" and "text-bottom" alignment positions also excludes the extra line spacing added by superscripts and subscripts, but not the additional line-spacing defined by the line-height.
  4. The "top" and "bottom" alignment positions take into account all these extra line spacings (including superscripts and subscripts). When the image alignment constrains the image to grow above or below the normal line-spacing, and the image is not absolutely positioned, the image will cause the "top" and "bottom" positions to be adjusted (just like superscripts and subscripts), so the effective line-height between rendered lines of text will be higher.

Stopping the text flow

On occasion it is desirable to stop text 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 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 clear=all>.

All images rendered as blocks 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 default link target

The following table shows how to alter the link target (whose default is the image description page) or how to remove it.</translate> <translate> Changing the link does not alter the format described in the previous sections. </translate>

Rendering a gallery of images

Gallery syntax

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

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

Note that the image code is not enclosed in brackets when enclosed in gallery tags.

Captions are optional, and may contain wiki links or other formatting. Some parameters used for controlling image output can be used here (such as links, and page number).

The File: prefix can be omitted .

For example:

<gallery>
File:Example.jpg|Item 1
File:Example.jpg|Item 2
File:Example.jpg
File:Example.jpg|'''Bold caption'''
File:Example.jpg|''italic caption''
File:Using Firefox.pdf|page=72
</gallery>

is formatted as:


Mode parameter

The mode parameter can be used to modify a gallery, taking the following options:

  • nolines has no border lines.
  • packed causes images to have the same height but different widths, with little space between the images. The rows in this organize themselves according to the width of the screen.
  • packed-overlay shows is similar to packed and shows the caption overlaid on the image, in a semi-transparent white box.
  • slideshow creates a slideshow of the images.

For example:

<gallery mode="packed-hover">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
Image:Pterois volitans Manado-e.jpg|''[[commons:Pterois volitans|Pterois volitans]]'' (Red Lionfish)
Image:Macropodus opercularis - front (aka).jpg|''[[commons:Macropodus opercularis|Macropodus opercularis]]'' (Paradise fish)
Image:Canthigaster valentini 1.jpg|''[[commons:Canthigaster valentini|Canthigaster valentini]]'' (Valentinni's sharpnose puffer)
Image:Flughahn.jpg|[[Image:POTY ribbon 2007.svg|25px]] ''[[commons:Dactylopterus volitans|Dactylopterus volitans]]'' (Flying gurnard)
Image:Fishmarket 01.jpg|''[[commons:Semicossyphus pulcher|Semicossyphus pulcher]]'' (California Sheephead)
Image:Pseudorasbora parva(edited version).jpg|''[[commons:Category:Pseudorasbora parva|Pseudorasbora parva]]'' (Topmouth gudgeon)
Image:MC Rotfeuerfisch.jpg|''[[commons:Category:Pterois antennata|Pterois antennata]]'' (Antennata Lionfish)
Image:Cleaning station konan.jpg|''[[commons:Novaculichthys taeniourus|Novaculichthys taeniourus]]''
Image:Synchiropus splendidus 2 Luc Viatour.jpg|''[[commons:Synchiropus splendidus|Synchiropus splendidus]]'' (Mandarin fish)
File:Psetta maxima Luc Viatour.jpg|''[[commons:Psetta maxima|Psetta maxima]]'' (Turbot)
File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]''
</gallery>

Gives mode: packed-hover:

and

<gallery mode="slideshow">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
Image:Pterois volitans Manado-e.jpg|''[[commons:Pterois volitans|Pterois volitans]]'' (Red Lionfish)
Image:Macropodus opercularis - front (aka).jpg|''[[commons:Macropodus opercularis|Macropodus opercularis]]'' (Paradise fish)
Image:Canthigaster valentini 1.jpg|''[[commons:Canthigaster valentini|Canthigaster valentini]]'' (Valentinni's sharpnose puffer)
Image:Flughahn.jpg|[[Image:POTY ribbon 2007.svg|25px]] ''[[commons:Dactylopterus volitans|Dactylopterus volitans]]'' (Flying gurnard)
Image:Fishmarket 01.jpg|''[[commons:Semicossyphus pulcher|Semicossyphus pulcher]]'' (California Sheephead)
Image:Pseudorasbora parva(edited version).jpg|''[[commons:Category:Pseudorasbora parva|Pseudorasbora parva]]'' (Topmouth gudgeon)
Image:MC Rotfeuerfisch.jpg|''[[commons:Category:Pterois antennata|Pterois antennata]]'' (Antennata Lionfish)
Image:Cleaning station konan.jpg|''[[commons:Novaculichthys taeniourus|Novaculichthys taeniourus]]''
Image:Synchiropus splendidus 2 Luc Viatour.jpg|''[[commons:Synchiropus splendidus|Synchiropus splendidus]]'' (Mandarin fish)
File:Psetta maxima Luc Viatour.jpg|''[[commons:Psetta maxima|Psetta maxima]]'' (Turbot)
File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]''
</gallery>

Gives mode: slideshow:

Files at other websites

You can link to an external file available online using the same syntax used for linking to an external web page. With these syntaxes, the image will not be rendered, but only the text of the link to this image will be displayed.

http://url.for/some/image.png

Will display: http://url.for/some/image.png

Or with a different displayed text:

[http://url.for/some/image.png link text here]

Will display: link text here