Help:How to add images to a page

Adding media files (images) to pages is a fairly straight-forward process to the beginner that requires little-to-no previous experience with wikis. The key to understanding how it is done is first deciding how you would like the image to be displayed: to the left, right, or centred; how big does it need to be?; does it require a caption? From these elements any image can be displayed in the most situations. Images must first be uploaded before they can be added to pages, unless transcluding them from the Wikimedia Commons repository, but more on that later.

Please note: Certain elements do not work in the current default skin (Citizen), but should work as intended in Mediawiki's original skin (Vector). This guide contains information regarding the Citizen skin. Images in Citizen are "responsive" and will reduce and increase in size depending on screen size.

Syntax elements

The image syntax is controlled by multiple elements, but for the purpose of this guide, we will focus only on four, these being:

Size: The size of the image given in pixels (px);
Format: How the image is displayed using "thumb" format (automatically aligns right);
Alignment: Horizontal or vertical alignment, but let's just focus on "left", "right" and "center" alignment for now;
Caption: A visible caption shown below the image (with "thumb" format). Links can be added to captions by simply including [[ ]] sqaure brackets.

Let's start off with how to add an image without any of these elements. In it's simplest form, adding an image is done by including the following syntax:

[[File:name of file.jpg]]

This will add the image ad whatever resolution it was uploaded at, so it could be huge and generally too big for the page. This is why we include the size element, measured in pixels (px). This will resize the image and allow for better control of how the image looks overall. If we add the other elements, it would look like this:

[[File:name of file.png|400px|thumb|right|caption]]

This is a 400 pixel wide image that is aligned to the right of the page, with a caption below the image.

Left-aligned example

Now, let's try this with an image already uploaded and placing it next to some text. The following wikitext with a left-aligned image, and left-aligned caption:

[[File:Bayonet training 02.jpg|400px|thumb|left|Bayonet training]]

Will render like so:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Right-aligned example

The following wikitext with a right-aligned image, and left-aligned caption:

[[File:Bayonet training 02.jpg|400px|thumb|right|Bayonet training]]

Will render like so:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Please notes: On smaller screens such as mobile phones, the image will become centred and the text will be "pushed" underneath. To test this, reduce the size of the browser screen to see how the image and text becomes responsive.

Centre-aligned example

The following wikitext with a centre-aligned image and caption will render like so:

[[File:Bayonet training 02.jpg|600px|thumb|center|{{c|Bayonet training<br>'''Aligned centre'''}}]]

Recap

There are several variations of size, format, and alignment that can be used to enhance the structure of a page. There are no hard and fast rules per se about how each page should look. Some pages have images aligned to the right, some may have a combination of left and right aligned images. Some pages even have larger, centred images, used primarily as a more advanced feature (see below). However, for general usage and to keep things simple for the beginner user:

Keep sizes consistent, 300–400px for portrait images (works well on mobile phones), and 400-500px for landscape images;
Always use the "thumb" format unless captions below the image are not required;
Align images that best suits the layout of the page's text;
Only include a caption if an image has one already, or you want to add supplementary information about the image.

Using large images

For adding larger images that take up the main width of the page, a separate class of format has been created to allow this feature. There are three options depending on how wide you would like the image: 800px, 1000px, and 1200px wide. For images with a higher resolution, any of these options are suitable to display the image in the centre of the page. Many "wide" screens will fit the 1200px option comfortably.

The syntax for this is:

<div class="res-img-1200">[[File:Bayonet training 02.jpg]]</div>

To add a caption, this requires some extra syntax where "c" centres the caption, and "x-smaller" reduces the size of the caption:

<div class="res-img-1200">[[File:Bayonet training 02.jpg]]{{c|{{x-smaller|Bayonet training}}}}</div>

The above syntax renders like so:

Bayonet training

Detailed help

For additional help that goes into greater details about every aspect of image integration, see the Mediawiki Images help page. This documentation is extensive and covers everything that can be accomplished using images within the Mediawiki software.