View source for Help:Gallery tag

{{For|the content-adaptive gallery template|Template:Gallery}}
{{For|the Wikipedia image use policy for galleries|Wikipedia:Image use policy#Image galleries}}
{{Redirect|H:G|text=For the help page on getting started with Wikipedia see [[Help:Getting started]]}}
{{Wikipedia how-to|H:G|H:GT|WP:HELPGALLERY}}
{{Warning|1={{big|Before creating a gallery, please review the '''[[WP:IG|image use policy for galleries]]'''. In general, galleries '''should be avoided''' if images can be effectively presented alongside the surrounding text.}}
}}

A '''gallery tag''' displays several pictures in an array or similar layout.

Galleries can display images formed into rows and columns by using the  {{Xtag|gallery|p}} (conversion of Wikitext to HTML) tag. Be aware that different screen sizes and browsers may affect [[Wikipedia:Accessibility|accessibility]] for some readers.

== Attributes and values ==

Attributes and values go after the word <code>gallery</code> and a blank space, and before the ending angle bracket:
<code>&lt;gallery ''attributes...''></code>
* <code>mode=</code>
** <code>traditional</code> Default, effect is explained below
** <code>nolines</code> No borders, less padding, captions centered under images
** <code>packed</code> All images aligned by having same height, justified, captions centered under images
** <code>packed-overlay</code> Like packed, but caption overlays the image, in a translucent box
** <code>packed-hover</code> 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)
** <code>slideshow</code> Slideshow
* <code>caption=</code> Adds an overall caption (or title) above the gallery; for multiple words, enclose in double quotes
* <code>widths=</code> Maximum image widths in pixels (has no effect if mode is set to packed, packed-overlay, packed-hover, or slideshow)
* <code>heights=</code> Image heights in pixels (has no effect if mode is set to slideshow)
* <code>perrow=</code> Number of images per row (has no effect if mode is set to packed, packed-overlay, packed-hover, or slideshow; ''See usage notes, below'')
* <code>showfilename=yes</code> Show each filename below the corresponding image
* <code>class=</code> One or more class names separated with spaces and enclosed in double quotes
* <code>style=</code> One or more CSS declarations separated with semicolons and enclosed in double quotes

== Usage notes ==
{{gallery remainders}}
* Indiscriminate use of the <code>perrow</code> attribute is strongly discouraged, because it overrides flexible use of different display sizes and [[aspect ratio]]s, 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.
* If <code>perrow</code> 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'' <code>perrow</code> ''is now the recommended default''. Prior to [[MediaWiki]] 1.17, the default was <code>perrow=4</code>.
* The default width and height are currently 120px. Images displayed by the {{tag|gallery}} tag do not obey user viewing preferences.
* The <code>packed</code> mode will automatically adjust image sizes to use available display space optimally.
* Every line specifies an image file. The <code>File:</code> prefix is unnecessary.
* [[Photo caption|Caption]]s are optional and are separated from file name by a [[vertical bar]] ("|").
* A common mistake is to forget the closing {{tag|gallery|c}} tag.
* When using, note that many parameters, specifically those relating to visual appearance, may not apply or work as expected to certain skins (notably the Minerva skin used by the mobile site).

=== Inserting images ===
When inserting images using the Insert > Images and media option, you will get the following:
<code><nowiki>[[</nowiki>File:''Name of file''|thumb|''Caption''<nowiki>]]</nowiki></code>

In a gallery, you must remove all brackets ("[" or "]") (except in wikilinks embedded within captions). You must also remove all options except for the caption and {{para|alt}}. Note that {{para||thumb}}, {{para||upright}}, {{para||right}}, {{para||left}}, {{para||center}}, {{para||centre}}, and <code>px</code> values are ''not'' supported and may cause [[Special:LintErrors/bogus-image-options|invalid image option]] errors.

The <code>File:</code> prefix can be omitted, leaving you with <code>''Name of file''|''Caption''</code>. However, it is helpful to include the prefix as an aid for quickly locating image specifiers in a gallery.

If you do not want to include a caption, remove <code>|''Caption''</code> as well.

== Syntax ==
There are several "modes" of galleries.

'''{{visible anchor|traditional}}:'''

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

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

Which gives:

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

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.

'''{{visible anchor|nolines}}:'''

By specifying the "nolines" mode parameter, the boxes are removed. Using the same syntax as before, but replacing {{xtag|gallery|o}} with {{xtag|gallery|params=mode=nolines|o}} we get:

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

'''{{visible anchor|packed}}:'''

Changing {{xtag|gallery|o}} to {{xtag|gallery|params=mode=packed|o}} produces a {{em|centered}} gallery, with slightly to significantly less space around each image (depending on its relative width and height), as shown below. It may relatively enlarge some images that were smaller in the above views.

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

For lengthy captions under narrow images, it's probably best to add a <code>heights=</code> parameter to make the images somewhat larger, as the default small size can lead to overly long stacks of caption text. See below.

'''{{visible anchor|Packed-overlay}}:'''
This uses {{xtag|gallery|params=mode=packed-overlay|o}} to produce captions overlaying the bottom of the image. The captions are probably best kept short.

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

'''{{visible anchor|Packed-hover}}:'''

This uses {{xtag|gallery|params=mode=packed-hover|o}}. [[wikt:hover|Hover]] your mouse over the images below. 

<gallery mode="packed-hover">
Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|The captions
Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|appear when
Thurston, the famous magician - East Indian Rope Trick.jpg|you
Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|mouse over
</gallery>

'''{{visible anchor|Slideshow}}:'''

This uses {{xtag|gallery|params=mode=slideshow|o}}.

<gallery mode="slideshow">
Detroit Publishing Co. - A Yeoman of the Guard (N.B. actually a Yeoman Warder), full restoration.jpg|The captions
Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|appear when
Thurston, the famous magician - East Indian Rope Trick.jpg|you
Joseph Ferdinand Keppler - The Pirate Publisher - Puck Magazine - Restoration by Adam Cuerden.jpg|mouse over
</gallery>

===Extended syntax===
Besides mode, the extended syntax is (see ''[[mw:Help:Images#Rendering a gallery of images|gallery tag help]]'' and hereafter on MediaWiki.org for full list of parameters):

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

Which produces:

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

The <code>widths=</code> and <code>perrow=</code> parameters do nothing in the packed, packed-overlay, or packed-hover modes, and <code>class="center"</code> does nothing when <code>perrow=</code> is used.

However, the <code>heights=</code> parameter can be extremely useful in these modes. This parameter specifies the ''initial'' height to render every image thumbnail, before images are ''possibly'' scaled up (keeping their size ratio) by JavaScript to fill rows; when needed the Javascript will query the image server to get resized thumbnails for several scales between 100% (the initial height specified) and about 125%. This gives good-looking galleries that can fill pages even when their size ratio are not exactly the same and allows using the actual area available for displaying on narrow mobile and large notebook/desktop/TV, and printing on various paper formats. (This mode also allows horizontally auto-scrollable galleries by embedding them in a large container within a scrollable container sized to fit the page width.)

For example, take the following:

<syntaxhighlight lang="xml">
<gallery mode="packed">
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]]
Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
Thurston, the famous magician - East Indian Rope Trick.jpg|[[Howard Thurston]] performing the [[Indian rope trick]]
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>
</syntaxhighlight>

gives:

<gallery mode="packed">
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]]
Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
Thurston, the famous magician - East Indian Rope Trick.jpg|[[Howard Thurston]] performing the [[Indian rope trick]]
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>

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

<syntaxhighlight lang="xml">
<gallery mode=packed heights=200px>
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]]
Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
Thurston, the famous magician - East Indian Rope Trick.jpg|[[Howard Thurston]] performing the [[Indian rope trick]]
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>
</syntaxhighlight>

gives:

<gallery mode="packed" heights="200px">
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]]
Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
Thurston, the famous magician - East Indian Rope Trick.jpg|[[Howard Thurston]] performing the [[Indian rope trick]]
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>

To avoid long stacks of caption text keep captions for narrow images short.

=== Captions ===
For all modes except traditional, captions are centered. To left-align the captions, specify the CSS declaration <code>text-align:left</code> in the <code>style=</code> attribute:

<syntaxhighlight lang="xml">
<gallery mode=packed heights=150px style="text-align:left">
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]]
Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
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>
</syntaxhighlight>

gives:

<gallery mode="packed" heights="150px" style="text-align:left">
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]]
Official_program_-_Woman_suffrage_procession_March_3,_1913_-_crop.jpg|The Official program of the 1913 Woman Suffrage Procession held in Washington, D.C.
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>

'''Centered captions:''' To center a caption when other options are ineffective, perhaps the most-reliable alternative is to use:

<syntaxhighlight lang="xml">yourimage.jpg | <div style="text-align: center;">yourcaption</div></syntaxhighlight>

'''Multi-line captions:''' To specify line breaks, add {{xtag|br|s}} HTML tags, or use {{tlx|br}}. If you need a blank line, you can use {{tlx|br|2}}.

== Center ==
To center a gallery use <code>class="center"</code>:

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

Which gives:

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

The use of the <code>perrow</code> attribute will cause this to not work. Where a specific number of images per row is desired, use separate {{tag|gallery|o}} elements. Centered galleries are the default for most variant gallery modes.

== See also ==
{{MediaWiki|Help:Images#Rendering a gallery of images}}
*[[Wikipedia:Image use policy]]
*[[Wikipedia:Manual of Style/Images]]
*[[Wikipedia:Manual of Style/Accessibility#Images]]
* [[Wikipedia:Extended image syntax]]
* {{tim|gallery}}
* [[b:Editing Wikitext/Pictures/Images in Containers#The Image Gallery|'''More gallery options''']]:&nbsp;see the drop-down box for more CSS gallery code
* [[mw:Help:Images#Rendering a gallery of images]]

{{Wikipedia technical help|collapsed}}
{{DEFAULTSORT:Gallery tag, Wikipedia}}
[[Category:Wikipedia features]]
[[Category:Wikipedia image help]]