Along with adding images in your MediaWiki articles, you can also add an image gallery to you MediaWiki page. Formatting the image gallery in MediaWiki is a little different than formatting individual images. For information on how to insert images into MediaWiki pages, please see our tutorial on How to insert images into MediaWiki. The image below is a small snapshot of what the image gallery looks like.

Preview of MediaWiki gallery

Next we will discuss the basics of the MediaWiki Image Gallery properties and parameters.

Image Gallery Image properties

Below is a snippet of what the code looks like for the image gallery. To have a gallery show on your site, you simply start your code with the <gallery> tag, add images one after another, and end with the </gallery> tag.

<gallery>
File:Example|caption
File:Example|caption
File:Example|caption
File:Example|caption
</gallery>

Each image can have its own parameters such as Italic caption, external link and so forth. Below are a list of some of the options available for formatting your image gallery images.

MediaWiki code for image gallery properties
Caption:
File:Example1.png|caption
Italic Caption:
File:Example2.png| ''Caption in Italics''
Bolded Caption:
File:Example3.png| '''Bolded Caption'''
External link:
File:Example4.png|caption [http://wikipedia.org Wikipedia]
Internal Link:
File:Example5.png|caption [[Your Wiki Page]]
External Image link:
File:Example6.png|caption|link=http://google.com
Internal Image Link:
File:Example7.png|caption|link=Help:Contents
Adding Alt text:
File:Example8.png|caption|alt=MediaWiki Image Gallery image

Image Gallery Parameters

Similar to the individual properties, the gallery parameters allow some formatting that apply to the entire gallery in general. For example, if you want all your images to be 100 pixels, you can use the widths= parameter to set all images to the specific size. Below is an example of how this works.

<gallery {parameter1} {parameter2} {parameter3}>
File:Example|caption </gallery>

Below is a brief description of what each parameter does.

  • caption="your caption here": This places a caption above the images in the Gallery.
  • widths=100px: Fixes the width of each image to 100 pixels.
  • heights=100px: Fixes the height of the images to 100 pixels.
  • perrow=4: Fixes the quantity of images displayed on a row to 4.
  • showfilename=all: This will display the filename for all images in the caption.

Example of a functioning image Gallery

In this example, the following code is used to demonstrate what the properties and parameters look like when you incorporate them in your MediaWiki page. When adding the code to your MediaWiki page, you will need to change the image name to an image name you uploaded to your server.

<gallery caption="Caption for gallery" widths=125px perrow=4 showfilename=all>
File:crown2r.png|Standard Caption
File:crown2.png| ''Caption in Italics''
File:crown1r.png| '''Bolded Caption'''
File:crown1.png|An External link to [http://wikipedia.org Wikipedia]
File:crown3r.png|An Internal link to [[Help:Contents]]
File:crown3.png|Links image itself to external site|link=http://google.com
File:crown4r.png|Links image itself to internal page|link=Help:Contents
File:crown4.png|Alt text in the "''alt''" tag only visible in the code|alt=MediaWiki Image Gallery image.
</gallery>

After inserting the code with valid image names you should have a gallery that looks like the snapshot below. Each image can have its own individual propertis that will display them differently from the other images.

Real Example of MediaWiki Gallery

For information on how to format individual images in MediaWiki, please see our article on Formatting images in MediaWiki.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Like this Article?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

News / Announcements

WordPress wp-login.php brute force attack
Updated 2014-07-17 06:43 pm EST
Hits: 201643

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!