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 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="false" 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 "navigation" option specifies whether the gallery serves navigational purposes, which isn't the case here. Some skins like the upcoming FandomMobile experience use the option.
• 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
Caption size	captionsize=[small/medium/large]	medium
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]	false
Gallery caption	caption=[text displayed]	No caption
"Navigation" modifier	navigation=[true/false]	false
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: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