Help:Galleries, Slideshows, and Sliders/wikitext

This page describes how to use and customize galleries, slideshows, and sliders using wikitext and the Source editor.

See also Help:Galleries, Slideshows, and Sliders for the basics. Note that on legacy platform wikis, videos are also supported for galleries and sliders only if new image galleries are not enabled. On UCP, videos are only supported in galleries.

Gallery

A gallery is a collection of thumbnail images or videos appearing as tiles on the page.

Captioned

Wikitext can be used in captions.

This photo links to Help:Contents.

Add a photo to this gallery

Basic example

Here is the basic gallery code:

<gallery>
Example1.png
Example2.png
Example3.png
</gallery>

Example with variations

The following code would produce a more complex gallery, as seen above:

<gallery navigation="true" orientation="none">
Example1.png
Example2.png|Captioned
Example3.png|'''[[Help:Wikitext|Wikitext]]''' can be used in captions.
Example4.png|This photo links to [[Help:Contents]].|link=Help:Contents
</gallery>

In this example...

• The first item is an image only.
• The second item is an image with a caption.
• The third item is an image with a caption that includes wikitext
• The fourth item is an image that is linked to a wiki page, followed by a caption.

Example with variables

If you wish to use variables in place of images, you'll need to switch to a slightly different form of the gallery tag, such as shown below (with three image variables and some settings defined):

{{#tag:gallery|
{{{1|}}}
{{{2|}}}
{{{3|}}}
|hideaddbutton="true"
|crop="true"
}}

Slideshow

A slideshow is an image module that displays one image at a time, and automatically rotates through the included images. Videos are ignored if placed in a slideshow.

• Kittens!
• Puppies!
• Monkeys!
• Giraffes!

1/4

Add photo

Basic example

Here is the basic slideshow code:

<gallery type="slideshow">
Example1.png
Example2.png
Example3.png
</gallery>

Example with variations

The following code would produce a more complex slideshow:

<gallery type="slideshow" hideaddbutton="true" navigation="true">
Example1.png
Example2.png|Captioned
Example3.png|'''[[Help:Wikitext|Wikitext]]''' can be used in gallery captions.
Example4.png|Clicking photo takes you to [[Help:Contents]].|link=Help:Contents|linktext=Help:Contents
</gallery>

In this example...

• The first item is an image only.
• The second item is an image with a caption.
• The third item is an image with a caption that includes wikitext
• The fourth item is an image that is linked to a wiki page. It also includes a caption, as well as a description of the link.

Slider

A slider is an image module that spans the full width of the page and automatically scrolls through up to four images. Videos are ignored if placed in a slider.

• 

  Kittens!

  They're feisty.

  

• 

  Puppies!

  They're adorable.

  

• 

  Monkeys!

  They're smart.

  

• 

  Giraffes!

  They're tall.

  

Tip: For best results, use images that are exactly 670 x 360px.

Basic example

Here is the basic slider code:

<gallery type="slider">
Example1.png
Example2.png
Example3.png
</gallery>

Example with variations

The following code would produce a more complex slider:

<gallery type="slider">
Example1.png
Example2.png|Example Two
Example3.png|Example Three|linktext=Great links
Example4.png|Example Four|link=Help:Contents|linktext=Interesting Pages
</gallery>

In this example...

• The first item is an image only.
• The second item is an image with a title.
• The third item is an image with a title and a subtitle.
• The fourth item is an image that is linked to a wiki page. It also includes a title and a subtitle.

Advanced Slider with variables

If you wish to use variables in place of images, you'll need to switch to a slightly different form of the gallery tag, such as shown below (with three image variables and some settings defined):

{{#tag:gallery|
{{{1|}}}
{{{2|}}}
{{{3|}}}
|type="slider"
|orientation="right"
|hideaddbutton="true"
}}

Wikitext and options

The following reference tables address the customization options for each of these three image modules.

Gallery

Type	Wikitext options	Default setting
Layout options
Image width (max)	widths=[number of pixels]px	120px
Number of columns	columns=[number of columns] or perrow=[number of columns]	Fit to page*
* If columns isn't specified, the number of photos displayed per row will adjust automatically according to the size of the browser window.
Gallery position	position=[left/center/right]	left
Image spacing	spacing=[small/medium/large]	medium
Image orientation and cropping	orientation=[none/landscape/portrait/square]	none
Caption options
Caption position	captionposition=[within/below]	below
Caption alignment	captionalign=[left/center/right]	left
Caption color	captiontextcolor=[color code] (#a1b2c3 or standard color name like "yellow")	Article text color
Border options
Border thickness	bordersize=[none/small/medium/large]	small
Border color	bordercolor=[color code] (#a1b2c3 or standard color name like "yellow")	Accent theme color
Other
Hide "add photo" button	hideaddbutton=true	false
Gallery caption	caption=[text displayed]	No caption
The images
Images are separated by newlines.
Captions are optional. Brackets are used only for adding links within captions.
Links are optional, and use link=

Slideshow

Type	Wikitext options	Default setting
Layout options
Photo width (max)	widths=[number of pixels] (no units)	300
Cropping	crop=[true]	false
Show recent uploads	showrecentuploads=[true]	false
Slideshow position	position=[left/center/right]	right
Other
Hide "add photo" button	hideaddbutton=true	false
Slideshow caption	caption=[text displayed]	No caption
The images
Images are separated by newlines.
Captions are optional. Brackets are used only for adding links within captions.
Links are optional, and use link=

Slider

Type	Wikitext options	Default setting
Layout options
Orientation	orientation=[bottom/right]	bottom
The images
Images are separated by newlines.
Titles are optional.
Links are optional, and use link=
Subtitles are optional, and use linktext=

See also

• Help:Galleries, Slideshows, and Sliders
• Help:New Image Galleries
• Help:Editing

Further help and feedback

• Browse and search other help pages at Help:Contents
• Check Fandom Community Central for sources of further help and support
• Check Contacting Fandom for how to report any errors or unclear steps in this article