EDT4OL/Intermediate wiki skills/images
Contents
Introduction
Photographs, charts, and diagrams can often be used effectively in online learning materials to communicate complex and/or multiple ideas, and to improve visual aesthetics. Online course developers therefore need to know how to:
- upload images legally, and
- manipulate the display (position and size) of images on published websites.
Importantly, course developers must respect the copyright and digital conventions for attributing images under the provisions of different open licences.
Introducing the wiki image syntax
In brief, the format of the wiki syntax for displaying an image is:
[[File:file name|type|location|size|caption]]
Notes:
- type refers to whether you want to display your image as a thumbnail or a framed image; we recommend that you do not use framed or thumbnail images because they do not automatically re-size on mobile devices
- location allows you to specify where on the page the image should appear, for example: left, right, or centre
- size allows you to specify the size (in pixels) at which the picture is displayed on the page
- caption is where you can choose to add a description for your image (Note: this only works for framed or thumbnail images)
- Tip: This may appear confusing at first, but don't worry! Experiment with the options below in your Sandbox on your User page. You will soon discover how this works. You don't have to memorise this syntax, because these tutorials are permanently available as reference materials!
The following table outlines the optional attributes and their effects on images:
| Parameter | Optional Image Attributes |
|---|---|
| Type |
'thumb' / 'thumbnail' or 'framed' Used for type option; results in an image displayed with specific formatting |
| Location |
'right', 'left', 'centre' or 'none'; determines the placement of the image on the page (Note: the default placement is on the left) |
| Size |
{width}px or {width}x{height}px will scale the image to the given width and height, while keeping its aspect ratio |
| Caption | Any element that is not identified as any one of the above is assumed to be caption text |
Recommended image syntax for publishing to course sites
Today, the majority of learners access course sites using mobile devices. Therefore, we recommend a 'mobile first' approach, taking requirements for responsive image display on small screens in portrait view into account. Ideally, we recommend using image markup that will re-size automatically for different screen resolutions. Bear in mind that your learner may be viewing the content on a different screen size than the one you are using to author course materials. In addition, there are a range of different screen sizes for mobile devices ranging from 320px to 414px wide in portrait view.
We recommend:
- avoiding the use of the 'thumb' and 'framed' images for courses, because they are not responsive for mobile devices, and
- preferably using a minimum width of 410px to accommodate for the majority of mobile screens in portrait view.
See, for example, the following markup we use for most images, either left or right-justified, which will re-size for smaller screens without awkward text-wrapping on larger than normal mobile phones:
[[File:networkedlearning.jpg|410px|right]]
However, for more thorough coverage of image wiki markup options, you can practise using 'frame' and 'thumb' as image types with captions below.
Tip
An image may 'float' over other text or headings you have in your wiki page, or result in text-wrapping that is hard to read on mobile devices. To remedy this, try adding the following underneath your image markup: {{clear}}. This makes sure that the text or content which follows will start after the image has been embedded in the page. So, for example, the image on the top of this course page used the following markup to avoid text-wrapping around the image:
[[image:Female_photographer-landscape.jpg|400px|right]]{{clear}}
Inserting an image with a frame
This is an image with the 'framed' attribute:
[[File:networkedlearning.jpg|framed|left|Creative Commons makes it flow.]]
- Note Framed images are displayed at the original size uploaded on the wiki, and will ignore the width parameter. Use 'thumb' if you want to change the size of the border.
Changing the size of the image
If you want to control the size of the image within a frame, use the 'thumb' type. You can use the size attribute to set the desired size in pixels. Here is the same image re-sized and centered:
[[File:networkedlearning.jpg|thumb|320px|right|Creative Commons makes it flow.]]
Using an existing image on WikiEducator
We'll start with an image that has previously been uploaded and is already available for use on WikiEducator.
Uploading images
When you want to upload a new image onto the server, you use the basic syntax e.g. [[File:Picture.jpg]] After you have saved your page, the wiki syntax will appear like this:
File:Picture.jpg
Notes
- If the image already exists on the wiki, the image will appear right away, otherwise you will get a red link like the one above. The red link tells you that the image still needs to be uploaded onto the server
- Alternatively, you can upload images directly using the 'Upload file' link, which is accessed from the tools sub-menu on the left of the screen and which launches the "Upload Wizard" tool
- As an open project, WikiEducator only permits the following openly licensed images: CC-BY, CC-BY-SA or images dedicated to the public domain, eg CC-0. Images which do not meet these open licence requirements, or where attribution metadata is missing (for example, the source link is not provided) will be deleted from the wiki
- Note the "Back to old form" link which is used for some images from non-standard 'gratis' image sites that do not apply Creative Commons Licences (e.g. Pixabay, Unsplash and Pexels.)
