Help:Gallery tag

From Wikipedia, the free encyclopedia
  (Redirected from Wikipedia:Gallery tag)
Jump to: navigation, search
For the screen adaptive gallery template, see Template:Gallery.
For the Wikipedia image use policy for galleries, see Wikipedia:Image use policy#Image galleries.
Shortcuts:

Galleries are images formed into rows and columns by use of the <gallery>...</gallery> parser (conversion of Wikitext to HTML) tag.

Attributes and values[edit]

  • mode=
    • traditional Default
    • nolines No borders, less padding
    • packed All images aligned by having same height, justified
    • packed-overlay Like packed, but caption overlays the image, in a translucent box
    • packed-hover Like packed-overlay, but caption is only visible on hover (degrades gracefully on screen readers, and falls back to packed-overlay if a touch screen is used)
  • caption= Adds an overall caption above the gallery
  • widths= Image widths (has no effect if mode is set to packed, packed-overlay, or packed-hover)
  • heights= Image heights
  • perrow= Number of images per row (has no effect if mode is set to packed, packed-overlay, or packed-hover; See usage notes, below)
  • showfilename=yes Show each filename below the corresponding image
  • class= One or more class names separated with spaces and enclosed in double quotes
  • style= One or more CSS declarations separated with semicolons and enclosed in double quotes

Usage notes[edit]

  • Indiscriminate use of the perrow attribute is strongly discouraged, because it prevents flexible use of different display sizes and aspect ratios, ranging from mobile miniature to wide "cinema" screens. However, the attribute should be used when a fixed grid arrangement is appropriate, such as "before/after", "low/medium/high", or other systematic comparisons of images.
  • The default width and height are currently 120px. It is good practice not to overspecify the size (instead, accept the default size), unless there is a strong reason to overrride the user's viewing preferences. The packed mode will automatically adjust image sizes to use available display space optimally.
  • If perrow is omitted, the width is fluid: one row comprises as many images as will fit across the available width of the user's display, wrapping automatically to as many additional lines as needed.
  • Omitting perrow is now the recommended default. Prior to MediaWiki 1.17, the default was 4.
  • In every line is a file. The File: prefix is optional. However, it is helpful to include it as an aid for quickly locating image specifiers in the WikiSource (for example, when cleaning up page layout).
  • "Thumb" must not be used and captions are optional. Caption is separated from file name by a vertical bar ("|").
  • Brackets ("[" or "]") must not be included, except for links within captions.
  • A common mistake is to forget the closing </gallery> tag.

Syntax[edit]

There are several "modes" of galleries.

traditional:

"Traditional" mode is currently the default, and, as such, need not be specified. The basic syntax is:

<gallery>
File:Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|1
File:Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|2
File:Thurston, the famous magician - East Indian Rope Trick.jpg|3
File:Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|4
</gallery>

Which gives:

If you want to make sure that any future changes to the default gallery mode will keep this style of gallery, you may specify "mode=traditional", similar to the examples below.

nolines:

By specifying the "nolines" mode parameter, the boxes are removed. Using the same syntax as before, but replacing <gallery> with <gallery mode=nolines> we get:

packed:

Instead changing <gallery> to <gallery mode=packed> produces a centered gallery with significantly less wasted space around each image, as shown below.

For lengthy captions under narrow images, it's probably best to add a heights= parameter to make the images somewhat larger, as the default, small size, can lead to ugly images. See below.

Packed-overlay: This uses <gallery mode=packed-overlay> to produce captions overlaying the bottom of the image. The captions are probably best kept short.

Packed-hover:

This uses <gallery mode=packed-hover>. Hover your mouse over the images below. NOTE: This defaults to the behaviour of packed-overlay on the mobile site.

Extended syntax[edit]

Besides mode, the extended syntax is (see gallery tag help and hereafter for full list of parameters):

<gallery caption="Sample gallery" widths="180px" heights="120px" >
File:Wiki.png
File:Wiki.png|Captioned
File:Wiki.png|Captioned with alt text|alt=The Wikipedia logo
File:Wiki.png|[[Help:Contents/Links|Links]] can be put in captions.
File:Wiki.png|Full [[MediaWiki]] <br />[[syntax]] may now be used...
</gallery>

Which produces:

The widths= and perrow= parameters do nothing in the packed, packed-overlay, or packed-hover modes. However, the heights= parameter can be extremely useful in these modes. For example, take the following:

<gallery mode=packed>
File:Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|A Yeoman Warder, from a Victorian-era [[photochrom]]
File:Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
File:Thurston, the famous magician - East Indian Rope Trick.jpg|[[Howard Thurston]] performing the [[Indian rope trick]]
File:Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|"The Pirate Publisher", a satire of copyright infringement from the magazine [[Puck (magazine)|Puck]].
</gallery>

gives:

As you can see, the narrowness of the image distorts the caption. This may easily be fixed by adding the heights= parameter, as such.

<gallery mode=packed heights=200px>
File:Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|A Yeoman Warder, from a Victorian-era [[photochrom]]
File:Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
File:Thurston, the famous magician - East Indian Rope Trick.jpg|[[Howard Thurston]] performing the [[Indian rope trick]]
File:Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|"The Pirate Publisher", a satire of copyright infringement from the magazine [[Puck (magazine)|Puck]].
</gallery>

gives:

Other advice for using packed mode is to keep captions for particularly narrow images as short as is convenient.

Captions[edit]

For all modes except traditional, captions are centred. To left-align the captions, specify the CSS declaration text-align:left in the style= attribute:

<gallery mode=packed heights=150px style="text-align:left">
File:Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|A Yeoman Warder, from a Victorian-era [[photochrom]]
File:Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
File:Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|"The Pirate Publisher", a satire of copyright infringement from the magazine [[Puck (magazine)|Puck]].
</gallery>

gives:

Center[edit]

To center a gallery use class="center":

<gallery class="center">
File:Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|1
File:Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|2
File:Thurston, the famous magician - East Indian Rope Trick.jpg|3
File:Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|4
</gallery>

Which gives:

The use of the perrow attribute will cause this to not work. Where a specific number of images per row is desired, use separate <gallery> elements.

See also[edit]