Help:Image galleries

General

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

<gallery>
File:file_name.ext|caption|alt=alt language
File:file_name.ext|caption|alt=alt language
{...}
</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 of the parameters controlling thumb output can also be used here, specifically the one's that modify the file (as opposed to one's that control where in the page the image falls). For example, with multi-paged media like pdfs, you can use code like page=4.

The File: prefix can be omitted.

for example:

<gallery>
File:Replace-me.png|Item 1
File:Replace-me.png|a link to [[Help:Contents]]
File:Replace-me.png
File:Replace-me.png|alt=An example image. It has flowers
File:Replace-me.png| ''italic caption''
File:Replace-me.png|on page "{{PAGENAME}}"
</gallery>

is formatted as:

Item 1
a link to Help:Contents
italic caption
on page "Image galleries"

Modes

The experimental mode parameter is taking options traditional, nolines, packed, packed-overlay, and packed-hover. Traditional is the default gallery mode. Nolines is like traditional, but with less borders. packed causes images to have the same height, but different widths, with little space between the images. "packed-overlay" allows the caption to be overlaid on top of the image. Last of all "packed-hover" is like "packed-overlay", but with the caption only showing up on hover.

packed-hover

For example:

<gallery mode="packed-hover">
File:Entropia Universe Port Atantis Harbour.jpg|[[Port Atlantis|Port Atlantis Harbour]]
File:Entropia Universe Planet Calypso Mulciber.jpg|[[Creature:Mulciber|Mulciber]]
File:Entropia Universe ROCKtropia Zomhattan at night.jpg|Zomhattan at night
File:Entropia Universe ROCKtropia No Way Out Maximum Security Prison.jpg|[[No Way Out Maximum Security Prison]]
File:Todd Verdeyen Next Island 01.jpg|Tropical paradise
File:Next_Island_Ancient_Greece_22-Nov-2010-04.jpg|[[Ancient Greece]]
File:Terranix_Male_01.jpg|[[Creature:Terranix|Terranix Male]] (wallpaper)
File:Monria appartments.jpg|Crater with habitats
</gallery>

Gives (mode: packed-hover):

Port Atlantis Harbour
Mulciber
Zomhattan at night
No Way Out Maximum Security Prison
Tropical paradise
Ancient Greece
Terranix Male (wallpaper)
Crater with habitats

traditional

mode="traditional"

Port Atlantis Harbour
Mulciber
Zomhattan at night
No Way Out Maximum Security Prison
Tropical paradise
Ancient Greece
Terranix Male (wallpaper)
Crater with habitats

nolines

mode="nolines"

Port Atlantis Harbour
Mulciber
Zomhattan at night
No Way Out Maximum Security Prison
Tropical paradise
Ancient Greece
Terranix Male (wallpaper)
Crater with habitats

packed

mode="packed"

Port Atlantis Harbour
Mulciber
Zomhattan at night
No Way Out Maximum Security Prison
Tropical paradise
Ancient Greece
Terranix Male (wallpaper)
Crater with habitats

packed-overlay

mode="packed-overlay"

Port Atlantis Harbour
Mulciber
Zomhattan at night
No Way Out Maximum Security Prison
Tropical paradise
Ancient Greece
Terranix Male (wallpaper)
Crater with habitats

Optional attributes

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

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

caption="{caption}": (caption text between double quotes for more than a word) sets a caption centered atop the gallery.
widths={width}px: sets the widths of the images, default 120px. Note the plural, widths
heights={heights}px: sets the (max) heights of the images.
perrow={integer}: sets the number of images per row. 0 means automatically adjust based on width of screen
showfilename={anything}: Show the filenames of the images in the individual captions for each image
mode={traditional|nolines|packed|packed-hover|packed-overlay}: See section above

Please note: The widths and heights parameters are taken more as suggestions then strict values for packed (and related) modes. Packed modes will adjust the width of images in order to make each row the same length.

Example:

Coding:

<gallery widths=60px heights=60px perrow=7 caption="sunflowers are groovy">
File:Replace-me.png
File:Replace-me.png
File:Replace-me.png
File:Replace-me.png
File:Replace-me.png
File:Replace-me.png
File:Replace-me.png
File:Replace-me.png
File:Replace-me.png
File:Replace-me.png
</gallery>

Result:

sunflowers are groovy

Links, references, contributors, categories

Parts of this page originally copied from http://www.mediawiki.org/wiki/Help:Images

Navigation menu