See also Help:Galleries, Slideshows, and Sliders for the basics. Note that videos are also supported for galleries and sliders, if new image galleries are not enabled.
Gallery
A gallery is a collection of thumbnail images appearing as tiles on the page.
Add a photo to this galleryBasic 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"> 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.
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.
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 | ||
| Photo width (max) | widths=[number of pixels] | 200px |
| 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 |
| Photo spacing | spacing=[small/medium/large] | Med |
| Photo 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=[hex color code] | Article text color |
| Border options | ||
| Border thickness | bordersize=[none/small/medium/large] | Small |
| Border color | bordercolor=[hex color code] | Accent theme color |
| Other | ||
| Hide "add photo" button | hideaddbutton=true | Not hidden |
| Gallery caption | caption=[text displayed] | No caption |
| The photos | ||
| Photos 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] | 300px |
| Cropping | crop=[true] | No cropping |
| Show recent uploads | showrecentuploads=[true] | False |
| Slideshow position | position=[left/center/right] | Right |
| Other | ||
| Hide "add photo" button | hideaddbutton=true | Not hidden |
| Slideshow caption | caption=[text displayed] | No caption |
| The photos | ||
| Photos 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=[left/right] | Bottom |
| The photos | ||
| Photos are separated by newlines. | ||
| Titles are optional. | ||
Links are optional, and use link= | ||
Subtitles are optional, and use linktext= | ||
See also
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
- Learn how to use Fandom in Fandom University: short how-to videos for all levels of experience
