m (→Gallery: fixed wording and formatting to make things parallel) Tags: Help rte-source |
(Editing a gallery) Tag: Help |
||
(32 intermediate revisions by 20 users not shown) | |||
Line 1: | Line 1: | ||
⚫ | |||
− | {{tocright}} |
||
⚫ | |||
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 videos are also supported for galleries and sliders, if [[Help:New Image Galleries|new image galleries]] are not enabled. |
||
− | ==Gallery== |
+ | == Gallery == |
A gallery is a collection of thumbnail images appearing as tiles on the page. |
A gallery is a collection of thumbnail images appearing as tiles on the page. |
||
− | <gallery navigation="true"> |
+ | <gallery navigation="true" orientation="none"> |
Example1.png |
Example1.png |
||
Example2.png|Captioned |
Example2.png|Captioned |
||
Example3.png|'''[[Help:Wikitext|Wikitext]]''' can be used in captions. |
Example3.png|'''[[Help:Wikitext|Wikitext]]''' can be used in captions. |
||
− | Example4.png |
+ | Example4.png|This photo links to [[Help:Contents]].|link=Help:Contents |
</gallery> |
</gallery> |
||
⚫ | |||
− | |||
⚫ | |||
− | 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 |
||
⚫ | |||
− | |||
− | |||
− | |||
− | ==Examples== |
||
⚫ | |||
⚫ | |||
<pre> |
<pre> |
||
Line 35: | Line 23: | ||
</gallery> |
</gallery> |
||
</pre> |
</pre> |
||
− | This would look like: |
||
⚫ | |||
− | Example1.png |
||
− | Example2.png |
||
− | Example3.png |
||
− | </gallery> |
||
− | === |
+ | === Example with variations === |
− | + | The following code would produce a more complex gallery, as seen above: |
|
<pre> |
<pre> |
||
− | <gallery navigation="true"> |
+ | <gallery navigation="true" orientation="none"> |
Example1.png |
Example1.png |
||
Example2.png|Captioned |
Example2.png|Captioned |
||
Example3.png|'''[[Help:Wikitext|Wikitext]]''' can be used in captions. |
Example3.png|'''[[Help:Wikitext|Wikitext]]''' can be used in captions. |
||
− | Example4.png |
+ | Example4.png|This photo links to [[Help:Contents]].|link=Help:Contents |
</gallery> |
</gallery> |
||
</pre> |
</pre> |
||
+ | In this example... |
||
− | This would look like: |
||
+ | |||
⚫ | |||
− | Screenshot 592.png |
||
− | Himawari my little sister can t be this cute by dannex009-d96usop.png |
||
− | Chibi himawari by marcinha20-d97xire.png |
||
− | ALEK.jpg |
||
− | Dolly-logo.jpg |
||
− | </gallery> |
||
− | Explanation: |
||
* The first item is an image only. |
* The first item is an image only. |
||
* The second item is an image with a caption. |
* The second item is an image with a caption. |
||
Line 68: | Line 43: | ||
* The fourth item is an image that is linked to a wiki page, followed by a caption. |
* 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): |
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> |
||
⚫ | |||
⚫ | |||
+ | {{{1|}}} |
||
+ | {{{2|}}} |
||
+ | {{{3|}}} |
||
+ | |hideaddbutton="true" |
||
+ | |crop="true" |
||
+ | }} |
||
+ | </pre> |
||
+ | |||
⚫ | |||
A slideshow is an image module that displays one image at a time, and automatically rotates through the included images. |
A slideshow is an image module that displays one image at a time, and automatically rotates through the included images. |
||
− | <gallery type="slideshow" |
+ | <gallery type="slideshow" crop="true"> |
Example1.png|Kittens! |
Example1.png|Kittens! |
||
Example2.png|Puppies! |
Example2.png|Puppies! |
||
Line 80: | Line 66: | ||
</gallery> |
</gallery> |
||
− | ===Basic example=== |
+ | === Basic example === |
Here is the basic slideshow code: |
Here is the basic slideshow code: |
||
Line 91: | Line 77: | ||
</pre> |
</pre> |
||
− | ===Example with variations=== |
+ | === Example with variations === |
The following code would produce a more complex slideshow: |
The following code would produce a more complex slideshow: |
||
Line 110: | Line 96: | ||
* 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. |
* 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. |
||
Line 122: | Line 108: | ||
Tip: For best results, use images that are exactly 670 x 360px. |
Tip: For best results, use images that are exactly 670 x 360px. |
||
− | ===Basic example=== |
+ | === Basic example === |
Here is the basic slider code: |
Here is the basic slider code: |
||
Line 133: | Line 119: | ||
</pre> |
</pre> |
||
− | ===Example with variations=== |
+ | === Example with variations === |
The following code would produce a more complex slider: |
The following code would produce a more complex slider: |
||
Line 152: | Line 138: | ||
* The fourth item is an image that is linked to a wiki page. It also includes 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): |
||
+ | |||
+ | <pre> |
||
⚫ | |||
+ | {{{1|}}} |
||
+ | {{{2|}}} |
||
+ | {{{3|}}} |
||
⚫ | |||
+ | |orientation="right" |
||
+ | |hideaddbutton="true" |
||
+ | }} |
||
+ | </pre> |
||
+ | |||
⚫ | |||
The following reference tables address the customization options for each of these three image modules. |
The following reference tables address the customization options for each of these three image modules. |
||
− | ===Gallery=== |
+ | === Gallery === |
{| class="article-table" style="width:100%;" |
{| class="article-table" style="width:100%;" |
||
! style="width:30%;" | Type |
! style="width:30%;" | Type |
||
Line 204: | Line 204: | ||
|} |
|} |
||
− | ===Slideshow=== |
+ | === Slideshow === |
{| class="article-table" style="width:100%;" |
{| class="article-table" style="width:100%;" |
||
! style="width:30%;" | Type |
! style="width:30%;" | Type |
||
Line 235: | Line 235: | ||
|} |
|} |
||
− | ===Slider=== |
+ | === Slider === |
{| class="article-table" style="width:100%;" |
{| class="article-table" style="width:100%;" |
||
! style="width:30%;" | Type |
! style="width:30%;" | Type |
||
Line 243: | Line 243: | ||
! colspan="3" | Layout options |
! colspan="3" | Layout options |
||
|- |
|- |
||
− | | Orientation || <code>orientation=[left/right]</code> || '' |
+ | | Orientation || <code>orientation=[left/right]</code> || ''Bottom'' |
|- |
|- |
||
! colspan="3" | The photos |
! colspan="3" | The photos |
||
Line 261: | Line 261: | ||
*[[Help:Editing]] |
*[[Help:Editing]] |
||
− | ==Further help and feedback== |
+ | == Further help and feedback == |
{{Help and feedback section}} |
{{Help and feedback section}} |
||
− | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
− | |||
[[de:Hilfe:Galerien, Diashows und Slider/Wikitext]] |
[[de:Hilfe:Galerien, Diashows und Slider/Wikitext]] |
||
+ | [[es:Ayuda:Galerías, presentaciones y diapositivas/wikitexto]] |
||
[[fr:Aide:Galeries, diaporamas et carrousels/wikitexte]] |
[[fr:Aide:Galeries, diaporamas et carrousels/wikitexte]] |
||
[[ja:ヘルプ:ギャラリーとスライドショーとスライダー/ウィキテキスト]] |
[[ja:ヘルプ:ギャラリーとスライドショーとスライダー/ウィキテキスト]] |
||
[[nl:Help:Galerijen en slideshows/wikitekst]] |
[[nl:Help:Galerijen en slideshows/wikitekst]] |
||
+ | [[pt:Ajuda:Galerias, apresentações e sliders/Wikitexto]] |
||
⚫ | |||
− | [[ |
+ | [[ru:Справка:Галерея, слайдшоу и слайдер/викитекст]] |
+ | [[tr:Yardım:Galeriler, Slayt Gösterileri ve Sürgü/wiki metin]] |
||
⚫ | |||
[[vi:Trợ giúp:Thư viện ảnh, Khung trình chiếu và Thanh trượt/Mã wiki]] |
[[vi:Trợ giúp:Thư viện ảnh, Khung trình chiếu và Thanh trượt/Mã wiki]] |
||
[[zh:Help:用wiki文本製作圖片冊、幻燈片、滑塊]] |
[[zh:Help:用wiki文本製作圖片冊、幻燈片、滑塊]] |
||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ |
Revision as of 04:31, 20 December 2019
This page describes how to use and customize photo galleries, slideshows, and sliders using wikitext.
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.
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.
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
- 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