Changes: Help:Galleries, Slideshows, and Sliders/wikitext

Revision as of 00:53, 17 September 2020

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.

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!

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]` (no units)	200
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=`

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

@@ Line 1: / Line 1: @@
+{{tocright}}This page describes how to use and customize '''galleries, slideshows, and sliders''' using [[Help:Wikitext|wikitext]] and the [[Help:Source edit mode|Source editor]].
-{{tocright}}
-This page describes how to use and customize '''photo galleries, slideshows, and sliders''' using [[Help:Wikitext|wikitext]].
-See also [[Help:Galleries, Slideshows, and Sliders]] for the basics. Note that videos are also supported for galleries and sliders, if [[Help:New Image Galleries|new image galleries]] are not enabled.
+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 [[Help:New Image Galleries|new image galleries]] are ''not'' enabled. On UCP, videos are only supported in galleries.
-==Gallery==
+== Gallery ==
-A gallery is a collection of thumbnail images appearing as tiles on the page.
+A gallery is a collection of thumbnail images or videos appearing as tiles on the page.
-<gallery navigation="true">
+<gallery navigation="true" orientation="none">
 Example1.png
 Example2.png|Captioned
 Example3.png|'''[[Help:Wikitext|Wikitext]]''' can be used in captions.
-Example4.png|link=Help:Contents|This photo links to [[Help:Contents]].
+Example4.png|This photo links to [[Help:Contents]].|link=Help:Contents
 </gallery>
+=== Basic example ===
+Here is the basic gallery code:
-A gallery can also be formatted as a slideshow or slider. A slideshow gallery can be made by adding <i>type="slideshow"</i> in the tags.
-<gallery type="slideshow" position="center">
-Shopping_card2.jpg
-Shopping_card.jpg
-</gallery>
-==Examples==
-===Basic example===
-Here is the code for a basic gallery:
 <pre>
@@ Line 35: / Line 23: @@
 </gallery>
 </pre>
-This would look like:
-<gallery>
-Example1.png
-Example2.png
-Example3.png
-</gallery>
-===Example with variations===
+=== Example with variations ===
-Here is the code for a more complex gallery with variations.
+The following code would produce a more complex gallery, as seen above:
 <pre>
-<gallery navigation="true">
+<gallery navigation="true" orientation="none">
 Example1.png
 Example2.png|Captioned
 Example3.png|'''[[Help:Wikitext|Wikitext]]''' can be used in captions.
-Example4.png|link=Help:Contents|This photo links to [[Help:Contents]].
+Example4.png|This photo links to [[Help:Contents]].|link=Help:Contents
 </gallery>
 </pre>
+In this example...
-This would look like:
-<gallery navigation="true">
-Example1.png
-Example2.png|Captioned
-Example3.png|'''[[Help:Wikitext|Wikitext]]''' can be used in captions.
-Example4.png|link=Help:Contents|This photo links to [[Help:Contents]].
-</gallery>
-Explanation:
 * The first item is an image only.
 * The second item is an image with a caption.
@@ Line 67: / Line 43: @@
 * 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):
+<pre>
-==Slideshow==
+{{#tag:gallery|
-A slideshow is an image module that displays one image at a time, and automatically rotates through the included images.
+{{{1|}}}
+{{{2|}}}
+{{{3|}}}
+|hideaddbutton="true"
+|crop="true"
+}}
+</pre>
+== 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.
-<gallery type="slideshow" position="right" crop=true>
+<gallery type="slideshow" crop="true">
 Example1.png|Kittens!
 Example2.png|Puppies!
@@ Line 79: / Line 66: @@
 </gallery>
-===Basic example===
+=== Basic example ===
 Here is the basic slideshow code:
@@ Line 90: / Line 77: @@
 </pre>
+{{clr}}
-===Example with variations===
+=== Example with variations ===
 The following code would produce a more complex slideshow:
@@ Line 109: / Line 97: @@
 * 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==
+== Slider ==
-A slider is an image module that spans the full width of the page and automatically scrolls through up to four images.
+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.
 <gallery type="slider">
@@ Line 116: / Line 104: @@
 Example2.png|Puppies!|linktext=They're adorable.
 Example3.png|Monkeys!|linktext=They're smart.
-Example4.png|Giraffes!|linktext=They're ridiculous.
+Example4.png|Giraffes!|linktext=They're tall.
 </gallery>
 Tip: For best results, use images that are exactly 670 x 360px.
-===Basic example===
+=== Basic example ===
 Here is the basic slider code:
@@ Line 132: / Line 120: @@
 </pre>
-===Example with variations===
+=== Example with variations ===
 The following code would produce a more complex slider:
@@ Line 151: / Line 139: @@
 * 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 ===
-==Wikitext and options==
+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):
+<pre>
+{{#tag:gallery|
+{{{1|}}}
+{{{2|}}}
+{{{3|}}}
+|type="slider"
+|orientation="right"
+|hideaddbutton="true"
+}}
+</pre>
+== Wikitext and options ==
 The following reference tables address the customization options for each of these three image modules.
-===Gallery===
+=== Gallery ===
 {| class="article-table" style="width:100%;"
-! style="width:30%;" | Type
+! style="width:28%;" | Type
-! style="width:40%;" | Wikitext options
+! style="width:45%;" | Wikitext options
-! style="width:20%;" | Default setting
+! style="width:17%;" | Default setting
 |-
-! colspan="3" | Layout options
+! colspan="3" style="text-align:center;" | Layout options
 |-
-| Photo width (max) || <code>widths=[number of pixels]</code> || ''200px''
+| Image width (max) || <code>widths=[number of pixels]</code> (no units) || ''200''
 |-
-| Number of columns || <code>columns=[number of columns]</code> or <code>perrow=[number of columns]</code> || ''Fit to page*''
+| Number of columns || <code>columns=[number of columns]</code> or<br /><code>perrow=[number of columns]</code> || ''Fit to page*''
 |-
 | colspan="3" | <nowiki>*</nowiki> ''If <code>columns</code> isn't specified, the number of photos displayed per row will adjust automatically according to the size of the browser window.''
 |-
-| Gallery position || <code>position=[left/center/right]</code> || ''Left''
+| Gallery position || <code>position=[left/center/right]</code> || ''left''
 |-
-| Photo spacing || <code>spacing=[small/medium/large]</code> || ''Med''
+| Image spacing || <code>spacing=[small/medium/large]</code> || ''medium''
 |-
-| Photo orientation and cropping || <code>orientation=[none/landscape/portrait/square]</code> || ''None''
+| Image orientation and cropping || <code>orientation=[none/landscape/portrait/square]</code> || ''none''
 |-
-! colspan="3" | Caption options
+! colspan="3" style="text-align:center;" | Caption options
 |-
-| Caption position || <code>captionposition=[within/below]</code> || ''Below''
+| Caption position || <code>captionposition=[within/below]</code> || ''below''
 |-
-| Caption alignment || <code>captionalign=[left/center/right]</code> || ''Left''
+| Caption alignment || <code>captionalign=[left/center/right]</code> || ''left''
 |-
-| Caption color || <code>captiontextcolor=[hex color code]</code> || ''Article text color''
+| Caption color || <code>captiontextcolor=[color code]</code><br />(#a1b2c3 or standard color name like "yellow") || ''Article text color''
 |-
-! colspan="3" | Border options
+! colspan="3" style="text-align:center;" | Border options
 |-
-| Border thickness || <code>bordersize=[none/small/medium/large]</code> || ''Small''
+| Border thickness || <code>bordersize=[none/small/medium/large]</code> || ''small''
 |-
-| Border color || <code>bordercolor=[hex color code]</code> || ''Accent theme color''
+| Border color || <code>bordercolor=[color code]</code><br />(#a1b2c3 or standard color name like "yellow") || ''Accent theme color''
 |-
-! colspan="3" | Other
+! colspan="3" style="text-align:center;" | Other
 |-
-| Hide "add photo" button || <code>hideaddbutton=true</code> || ''Not hidden''
+| Hide "add photo" button || <code>hideaddbutton=true</code> || ''false''
 |-
 | Gallery caption || <code>caption=[text displayed]</code> || ''No caption''
 |-
-! colspan="3" | The photos
+! colspan="3" style="text-align:center;" | The images
 |-
-| colspan="2" | Photos are separated by newlines. ||
+| colspan="2" | Images are separated by newlines. ||
 |-
 | colspan="2" | Captions are optional. Brackets are used only for adding links within captions. ||
@@ Line 203: / Line 205: @@
 |}
-===Slideshow===
+=== Slideshow ===
 {| class="article-table" style="width:100%;"
-! style="width:30%;" | Type
+! style="width:28%;" | Type
-! style="width:40%;" | Wikitext options
+! style="width:45%;" | Wikitext options
-! style="width:20%;" | Default setting
+! style="width:17%;" | Default setting
 |-
-! colspan="3" | Layout options
+! colspan="3" style="text-align:center;" | Layout options
 |-
-| Photo width (max) || <code>widths=[number of pixels]</code> || ''300px''
+| Photo width (max) || <code>widths=[number of pixels]</code> (no units) || ''300''
 |-
-| Cropping || <code>crop=[true]</code> || ''No cropping''
+| Cropping || <code>crop=[true]</code> || ''false''
 |-
-| Show recent uploads || <code>showrecentuploads=[true]</code> || ''False''
+| Show recent uploads || <code>showrecentuploads=[true]</code> || ''false''
 |-
-| Slideshow position || <code>position=[left/center/right]</code> || ''Right''
+| Slideshow position || <code>position=[left/center/right]</code> || ''right''
 |-
-! colspan="3" | Other
+! colspan="3" style="text-align:center;" | Other
 |-
-| Hide "add photo" button || <code>hideaddbutton=true</code> || ''Not hidden''
+| Hide "add photo" button || <code>hideaddbutton=true</code> || ''false''
 |-
 | Slideshow caption || <code>caption=[text displayed]</code> || ''No caption''
 |-
-! colspan="3" | The photos
+! colspan="3" style="text-align:center;" | The images
 |-
-| colspan="2" | Photos are separated by newlines. ||
+| colspan="2" | Images are separated by newlines. ||
 |-
 | colspan="2" | Captions are optional. Brackets are used only for adding links within captions. ||
@@ Line 234: / Line 236: @@
 |}
-===Slider===
+=== Slider ===
 {| class="article-table" style="width:100%;"
-! style="width:30%;" | Type
+! style="width:28%;" | Type
-! style="width:40%;" | Wikitext options
+! style="width:45%;" | Wikitext options
-! style="width:20%;" | Default setting
+! style="width:17%;" | Default setting
 |-
-! colspan="3" | Layout options
+! colspan="3" style="text-align:center;" | Layout options
 |-
-| Orientation || <code>orientation=[left/right]</code> || ''left''
+| Orientation || <code>orientation=[bottom/right]</code> || ''bottom''
 |-
-! colspan="3" | The photos
+! colspan="3" style="text-align:center;" | The images
 |-
-| colspan="2" | Photos are separated by newlines. ||
+| colspan="2" | Images are separated by newlines. ||
 |-
 | colspan="2" | Titles are optional. ||
@@ Line 260: / Line 262: @@
 *[[Help:Editing]]
-==Further help and feedback==
+== Further help and feedback ==
 {{Help and feedback section}}
-[[Category:Editing]]
-[[Category:Source editing]]
-[[Category:Image help|{{PAGENAME}}]]
-[[Category:Help|{{PAGENAME}}]]
 [[de:Hilfe:Galerien, Diashows und Slider/Wikitext]]
+[[es:Ayuda:Galerías, presentaciones y diapositivas/wikitexto]]
 [[fr:Aide:Galeries, diaporamas et carrousels/wikitexte]]
 [[ja:ヘルプ:ギャラリーとスライドショーとスライダー/ウィキテキスト]]
 [[nl:Help:Galerijen en slideshows/wikitekst]]
+[[pt:Ajuda:Galerias, apresentações e sliders/Wikitexto]]
-[[ru:Справка:Галерея и слайдшоу/викитекст]]
-[[uk:Довідка:Галерея і слайдшоу/вікітекст]]
+[[ru:Справка:Галерея, слайдшоу и слайдер/викитекст]]
+[[tr:Yardım:Galeriler, Slayt Gösterileri ve Sürgü/wiki metin]]
+[[uk:Довідка:Галерея та слайдшоу/вікітекст]]
 [[vi:Trợ giúp:Thư viện ảnh, Khung trình chiếu và Thanh trượt/Mã wiki]]
 [[zh:Help:用wiki文本製作圖片冊、幻燈片、滑塊]]
+[[Category:Editing]]
+[[Category:Source editing]]
+[[Category:Image help|{{PAGENAME}}]]
+[[Category:Help|{{PAGENAME}}]]