More actions
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|300px|thumb|right|caption]]
This is a 300 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:
[[File:Bowder Stone (6287).jpg|400px|thumb|left|The Bowder Stone, near Grange in Borrowdale]]
Will render like so:
Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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:
[[File:Colwith Force (4714).jpeg|400px|thumb|right|Colwith Force]]
Will render like so:
Lorem ipsum dolor sit amet, consectetur adipiscing 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 adipiscing 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 will render like so:
[[File:Cliff edge at Hodge Close Quarry (5560).jpg|500px|thumb|center|Cliff edge at Hodge Close Quarry]]
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:Elter Water (5267).jpg]]</div>
To add a caption, this requires some extra syntax where "c" centres the caption, and "smaller" reduces the size of the caption:
<div class="res-img-1200">[[File:Elter Water (5267).jpg]]{{c|{{smaller|Elter Water is the smallest of the lakes at the opening of the Great Langdale Valley}}}}</div>
The above syntax renders like so:
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.