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.
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.
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.
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] orperrow=[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
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