EDT4OL/Intermediate wiki skills/images

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:



Notes:


 * 1) 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
 * 2) location allows you to specify where on the page the image should appear, for example: left, right, or centre
 * 3) size allows you to specify the size (in pixels) at which the picture is displayed on the page
 * 4) 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:

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: 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:
 * 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.



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:. 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:



Inserting an image with a frame
This is an image with the 'framed' attribute:






 * 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:





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.  After you have saved your page, the wiki syntax will appear like this:

File:Picture.jpg