Knowledgebase
How to create a gallery of images in MediaWiki
In addition to displaying single images in the content of pages in MediaWiki, it's also possible to create a gallery of images. The gallery consists of rows of thumbnail sized images.
Here we'll assume that you're already familiar with how to embed a single image in the content of pages.
In the most basic form without any additional options you can create a gallery by editing the page and adding something like this in its content:
<gallery> File:Example Image1.png File:Example Image2.jpg File:Example Image3.jpg File:Example Image4.jpg File:Example Image5.jpeg File:Example Image6.jpg File:Example Image7.jpg File:Example Image8.jpg File:Example Image9.jpg </gallery>We've used example image names. Just put between the tags <gallery> </gallery> the names of the file description pages of the images that you want to be displayed in the gallery.
Unlike embedding a single picture, when you add a gallery you don't have to put double square brackets around the name of the image. Another difference is that you don't have to add the File: prefix for the namespace in front of the names of images.
If you don't specify any additional options, all the images in the gallery are automatically resized to the same width; by default, it's 120 pixels. In this way the same number of images fit in a single row/line (7 images per row). The images are shown with frames.
You can add options to each individual image. You can also add options in the <gallery> tag, and these options will apply to all images in the gallery.
When it comes to adding options to particular images in the gallery many options will not have any effect. For example, the ones for changing the alignment and size. It's possible to display a gallery of images and set each image to a different size but not with the <gallery> tags. Other methods have to be used to avoid issues with how the images are arranged on the screen. One thing that you can safely add to each image is a caption. It's shown under the frame of the image. If you want to, you can also add links in the caption and/or format it. For example:
<gallery> File:Example Image1.png|Example caption File:Example Image2.jpg|Example caption with a link to [[Main Page]] File:Example Image3.jpg File:Example Image4.jpg|Caption with a link [http://.hostknox.com HostKnox] File:Example Image5.jpeg|Example caption with '''formatting''' </gallery>The first image will have the text Example caption under it. The second will have the text Example caption with a link to Main Page and Main Page will be a link to that page on the same site. The fourth image will have the text Caption with a link to HostKnox under it, and HostKnox will be an external link to http://hostknox.com. The fifth image will have the caption Example caption with formatting and the word formatting will be in bold letters.
Gallery Options and Parameters
There are options that can be added to the <gallery> tag itself. They are applied to the whole gallery, meaning that each image is affected. The way you add options within the tag is to list the parameter followed by the symbol = and the value (e.g. <gallery mode=packed-hover widths=150px>).
Here are some useful options (these are not all the available options):
- mode - with this you can change how the images are shown in the gallery. This can be used with MediaWiki versions 1.22 and newer. You can set it to the following:
- traditional - this is the default way a gallery is displayed, with frames around the images and with equal widths. If you don't set any mode, this is the one that will be used.
- nolines - the only difference as compared to the traditional mode is that with this mode the images are shown without frames.
- packed - with this mode the images are shown closer together with less space between them (and no frames). The images are resized to be with the same height and different widths (depending on their original dimensions). MediaWiki automatically configures the rows and the number of images in them depending on the screen. Like the previous two modes the caption of each image is shown under it.
- packed-hover - like the packed mode but with the difference that the caption of an image is shown over the image when the mouse pointer is hovered on the image. The caption text disappears the moment the mouse pointer is removed from the image.
- packed-overlay - what makes this mode different than the other two packed modes is that the caption of an image is constantly displayed on the image itself.
- widths - with this option you can change the default width (120 pixels) to which images in the gallery are resized (e.g. widths=150px). This is the maximum width to which the images will be resized.
- heights - with this option you can set the height to which images in the gallery will be resized (e.g. heights=100px).
Note that depending on the original dimensions of the images and the gallery mode that you have selected, the images may not be resized exactly to the width or height that you set with the options.
- perrow - with this option you can explicitly set how many images should be shown per row (e.g. perrow=5).
- caption - you can use this to display a name for the gallery or any text that you want. It's shown centered above the first row of the gallery. If the caption consists of more than one word, put quotation marks around the text (e.g. caption="This is an example gallery").
Depending on the mode that you select, some parameters may have no effect on the gallery.
Here's an example of how to add a gallery with options:
<gallery mode=nolines widths=150px perrow=3 caption="Sample Gallery"> File:Example Image1.png|Example caption File:Example Image2.jpg File:Example Image3.jpg|Some text File:Example Image4.jpg File:Example Image5.jpeg File:Example Image6.jpg File:Example Image7.jpg </gallery>The gallery will be displayed with the mode nolines so there will be no frames around the images. The nolines mode uses the configuration of the traditional mode, which is the default if no mode is set, and so normally the images will be displayed with widths of 120 pixels. But here the widths are explicitly set to 150 pixels. Each row will consist of three images, and since in the example gallery there are 7 images this will result in three rows. Above the gallery the text Sample Gallery will be displayed.
Some more articles related to images and file uploads: