Help:Gallery tag

From Infogalactic: the planetary knowledge core
Jump to: navigation, search

<templatestyles src="Module:Hatnote/styles.css"></templatestyles>

For the screen adaptive gallery template, see Template:Gallery.

<templatestyles src="Module:Hatnote/styles.css"></templatestyles>

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

  • 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

  • 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 override 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 wikitext (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

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:

  • 1

  • 2

  • 3

  • 4

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:

  • 1

  • 2

  • 3

  • 4

packed:

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

  • 1

  • 2

  • 3

  • 4

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.

  • 1

  • 2

  • 3

  • 4

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.

  • The captions

  • appear when

  • you

  • mouse over

Extended syntax

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:

  • Sample gallery
  • Wiki.png
  • Wiki.png

    Captioned

  • Wiki.png

    Captioned with alt text

  • Wiki.png

    Links can be put in captions.

  • Wiki.png

    Full MediaWiki
    syntax may now be used...

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:

  • A Yeoman Warder, from a Victorian-era photochrom

  • The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.

  • "The Pirate Publisher", a satire of copyright infringement from the magazine Puck.

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:

  • A Yeoman Warder, from a Victorian-era photochrom

  • The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.

  • "The Pirate Publisher", a satire of copyright infringement from the magazine Puck.

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

Captions

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:

  • A Yeoman Warder, from a Victorian-era photochrom

  • The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.

  • "The Pirate Publisher", a satire of copyright infringement from the magazine Puck.

Center

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:

  • 1

  • 2

  • 3

  • 4

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

Retrieved from "https://infogalactic.com/w/index.php?title=Help:Gallery_tag&oldid=3490325"