Using Galleries

Mobile Web
Although FandomMobile has basic gallery support, none of them will be displayed, as they will not have the intended effect as they do in FandomDesktop.

Galleries are a FANDOM feature that enables you to group a set of images into a single, connected block. It uses the <gallery> tag to make stuff happen.

Note how I said it was a FANDOM feature, not a MediaWiki one. MediaWiki has support to galleries, however they work entirely differently. Very thorough documentation can be found in the images page: Help:Images. Although FANDOM does provide documentation of its own implementation of galleries in the Help:Galleries, they contain much vague and stuff that does not apply to this wiki. This blog will serve as a thorough and complete guide.

Structuring

If you've had any experience with basic HTML, the syntax should be very familiar. You put down a <gallery> tag, and add the name of the images including the File: namespace. It looks like this:

<gallery>
File:filename.extension
File:filename.extension
</gallery>

If you need to add attributes to the gallery, you need to type the attribute's name, aswell as the attribute's value in the following fashion:

<gallery name = "value">
File:filename.extension
File:filename.extension
</gallery>

If you need to add attributes to the gallery, you can add them in the same way. The difference is that you must separate each attribute with a |. Additionally, if you want to add a caption, just add it to the end of the line.

<gallery name = "value">
File:filename.extension|name=value|caption 
File:filename.extension|name=value|caption
<!-- Note that neither of them have identation (spaces); -->
<!-- if you add them, it might break the gallery in weird ways -->
</gallery>

Types

Different gallery types have different designs and contain different attributes, covered right below in the Attributes section.

gallery

This type will display the images in a series of separate blocks with some spacing in-between. This is the default type if no type or an invalid one is typed.

<gallery type = "gallery">
File:MP-MrNoice.png|MrNoice
File:MP-Asttro.png|Asttro
File:MP-BubTheTamer.png|BubTheTamer
</gallery>

MrNoice

Asttro

BubTheTamer

slideshow

This type will display the images in a single block, allowing the reader to browse through the images in the gallery. Captions are displayed on hover.

slider

This type will display the images in a single block, automatically scrolling through and taking the entire space of the page. Captions are treated as titles and are displyaed on hover. If you want to add additional descriptions to the images, use |linktext= at the end of every image.

<gallery type = "slider">
File:MP-MrNoice.png|MrNoice|linktext=This is MrNoice
File:MP-Asttro.png|Asttro|linktext=This is Asttro
File:MP-BubTheTamer.png|BubTheTamer|linktext=This is BubTheTamer
</gallery>

MrNoice

This is MrNoice

Asttro

This is Asttro

BubTheTamer

This is BubTheTamer

Attributes

There are a couple attributes you can add to a gallery. Use the very same name = "value" syntax from earlier to add these, in the same way we added the gallery types.

Default galleries

widths

Sets the width of all images to be that value. It can be set to any number between 0 and infinity (it's important to note though that images that have an image width lower than it will be set to their width). There isn't a counterpart of this parameter for height. The default value is 185.

Gallery examples with the widths attribute 

<gallery widths = "100"> File:Williek.png </gallery>	<gallery widths = "140"> File:Williek.png </gallery>	<gallery widths = "180"> File:Williek.png </gallery>

columns

Determines how many columns the gallery has, which can also be worded as how many images there are per row. It can be set to a number between 0 and infinity. The default behaviour is to fit to page.

position

Determines where in the page you position the gallery. It can be set to left, center or right. The default value is right.

Gallery examples with the position attribute 

<gallery position = "center"> File:Williek.png </gallery>	<gallery position = "right"> File:Williek.png </gallery>

spacing

Determines what is the spacing between the images. It can be set to small, medium or large. The default value is right.

Galleries with the spacing attribute

Small gallery: Medium gallery (default): Large gallery:

Small gallery: <gallery spacing = "small"> File:MP-MrNoice.png File:MP-BubTheTamer.png </gallery> Medium gallery (default): <gallery spacing = "medium"> File:MP-MrNoice.png File:MP-BubTheTamer.png </gallery> Large gallery: <gallery spacing = "large"> File:MP-MrNoice.png File:MP-BubTheTamer.png </gallery>

captionposition

Determines where the image caption is positioned. It can be set to either within (the image) or below (the image). The default value is below.

Galleries with the captionposition attribute 

MrNoice BubTheTamer	MrNoice BubTheTamer
<gallery captionposition = "within"> File:MP-MrNoice.png|MrNoice File:MP-BubTheTamer.png|BubTheTamer </gallery>	<gallery captionposition = "below"> File:MP-MrNoice.png|MrNoice File:MP-BubTheTamer.png|BubTheTamer </gallery>

captionalign

Determines where the caption is aligned. It can be set to left, center or right. The default value is left.

Gallery examples with the captionalign attribute 

MrNoice	BubTheTamer	Asttro
<gallery captionalign = "left"> File:MP-MrNoice.png|MrNoice </gallery>	<gallery captionalign = "center"> File:MP-BubTheTamer.png|BubTheTamer </gallery>	<gallery captionalign = "right"> File:MP-Asttro.png|Asttro </gallery>

captiontextcolor

Determines the color of the caption. It can be set to any color code. The default color is the same as the article text color.

Galleries with the captiontextcolor attribute 

MrNoice BubTheTamer	MrNoice BubTheTamer
<gallery captiontextcolor = "#0f09"> File:MP-MrNoice.png|MrNoice File:MP-BubTheTamer.png|BubTheTamer </gallery>	<gallery captiontextcolor = "rgba(255, 0, 0, 0.5)"> File:MP-MrNoice.png|MrNoice File:MP-BubTheTamer.png|BubTheTamer </gallery>

captionsize

Determines the font size of the caption. It can be set to small, medium or large. The default size is medium.

Galleries with the captionsize attribute 

Small caption: MrNoice BubTheTamer Medium caption: MrNoice BubTheTamer Large caption: MrNoice BubTheTamer

Small caption: <gallery captionsize = "small"> File:MP-MrNoice.png|MrNoice File:MP-BubTheTamer.png|BubTheTamer </gallery> Medium caption (default): <gallery captionsize = "medium"> File:MP-MrNoice.png|MrNoice File:MP-BubTheTamer.png|BubTheTamer </gallery> Large caption: <gallery captionsize = "large"> File:MP-MrNoice.png|MrNoice File:MP-BubTheTamer.png|BubTheTamer </gallery>

bordersize

Determines the thickness of the border. It can be set to none, small, medium or large. The default size is small.

Galleries with the bordersize attribute 

<gallery bordersize = "none" widths = "80"> File:MP-MrNoice.png </gallery>	<gallery bordersize = "small" widths = "80"> File:MP-MrNoice.png </gallery>	<gallery bordersize = "medium" widths = "80"> File:MP-BubTheTamer.png </gallery>	<gallery bordersize = "large" widths = "80"> File:MP-Asttro.png </gallery>

bordercolor

Determines the color of the border. It can be set to any color code. The default color is the theme border color.

Galleries with the bordercolor attribute 

MrNoice BubTheTamer	MrNoice BubTheTamer
<gallery bordercolor = "#f007"> File:MP-MrNoice.png|MrNoice File:MP-BubTheTamer.png|BubTheTamer </gallery>	<gallery bordercolor = "rgba(0, 255, 0, 0.4)"> File:MP-MrNoice.png|MrNoice File:MP-BubTheTamer.png|BubTheTamer </gallery>

caption

Adds a caption to the gallery in general. It can be set to any text. The default behavior is to not have a caption.

Galleries with the caption attribute 

MrNoice, courtesy of MrNoice.	BubTheTamer, he tames.	Asttro, the Asttro. Something.
<gallery caption = "MrNoice, courtesy of MrNoice."> File:MP-MrNoice.png </gallery>	<gallery caption = "BubTheTamer, he tames."> File:MP-BubTheTamer.png </gallery>	<gallery caption = "Asttro, the Asttro."> File:MP-Asttro.png </gallery>

navigation

Determines if the gallery is one made purely for navigational purposes. It will not change anything in the FandomDesktop layout, but will separate the gallery into little boxes in the FandomMobile layout. It can be set to true or false. If set to true, all images must also have an associated link. The default value is false.

Slideshows

widths

Sets the width of all images to be that value. It can be set to any number between 0 and infinity (it's important to note though that images that have an image width lower than it will be set to their width). There isn't a counterpart of this parameter for height. The default value is 300.

Gallery examples with the widths attribute 

1/1	1/1
<gallery type = "slideshow" widths = "150"> File:Williek.png </gallery>	<gallery type = "slideshow" widths = "250"> File:Williek.png </gallery>

crop

Determines if the gallery must crop the images if they go above the given widths value. It can be set to true or false. The default value is false.

Gallery examples with the widths attribute 

1/1	1/1
<gallery type = "slideshow" crop = "true" widths = "100"> File:Williek.png </gallery>	<gallery type = "slideshow" crop = "true" widths = "150"> File:Williek.png </gallery>

showrecentuploads

Determines if the gallery must show the most recently uploaded files. It can be set to true or false. If set to true, it will show the last 20 most recently uploaded files. The default value is false.

position

Determines where in the page you position the slideshow. It can be set to left, center or right. The default value is right.

Gallery examples with the position attribute 

1/1	1/1
<gallery type = "slideshow" position = "center"> File:Williek.png </gallery>	<gallery type = "slideshow" position = "right"> File:Williek.png </gallery>

caption

Adds a caption to the gallery in general. It can be set to any text. The default behavior is to not have a caption.

Galleries with the caption attribute 

MrNoice, courtesy of MrNoice. 1/1	BubTheTamer, he tames. 1/1	Asttro, the Asttro. Something. 1/1
<gallery type = "slideshow" caption = "MrNoice, courtesy of MrNoice."> File:MP-MrNoice.png </gallery>	<gallery type = "slideshow" caption = "BubTheTamer, he tames."> File:MP-BubTheTamer.png </gallery>	<gallery type = "slideshow" caption = "Asttro, the Asttro."> File:MP-Asttro.png </gallery>

Sliders

orientation

Determines the orientation of the slider on hover. It can be set to either bottom or right. The default value is bottom.

<gallery type = "slider" orientation = "bottom">
File:MP-MrNoice.png
File:MP-BubTheTamer.png
File:MP-Asttro.png
</gallery>

<gallery type = "slider" orientation = "right">
File:MP-MrNoice.png
File:MP-BubTheTamer.png
File:MP-Asttro.png
</gallery>