M02a - Add images

Keywords: image, graphic, alternative text, context, visualisation, visual, infographic, graph, chart

What is it?

Each of the text editors available in UCL Moodle, Atto the Moodle default text editor and TinyMCE, enables the use of images as part of the entered text. Moodle accepts .jpg,.png,.svg and .gif formats.

Why use it?

Images can be used for aesthetic purposes and this also helps people to identify particular areas of a course, so can make it easier to navigate. They might also be used to visually illustrate complex ideas and information using diagrams, graphs, and charts. Whenever you are using images, please remember to follow accessibility guidelines (as explained in the 'Meeting the baseline' section below). 

Who can use it?

Images can be added by anyone while using the text editor.

Meeting the baseline

The  UCL Connected Learning Baseline suggests the following for Structure :

• 1.1 Present activities and resources in a meaningful, clearly structured and sequenced way - e.g. chronologically or by theme. Typically each Moodle section represents a topic, which may cover one or more weeks of study.
  • Use headings - Use Section Headings for each topic area and heading styles within labels, books and pages to maintain consistency across sections and help students see where they are.
  • Clearly group and label items within a section - Bring together common elements and use labels to provide common sub-headings across sections to help students navigate.

 The  Accessibility category suggests that you:

• 7.1 Provide accessible learning resources by ensuring:
  • Graphics have alternative text (for screen-readers).

How do I add an image?

U se the  toggle switch to turn 'Edit mode' on and edit the type of page element (Topic summary, Text and Media area, page etc) where you will get a text editor.

You can either drag and drop an image, copy and paste or upload one. Please see below for further instructions. If you are using high quality images, you can compress your images first so they don't slow down the page load.

Dragging and dropping an image

• Images may be dragged and dropped directly into the Atto editor if you are using a supported browser (not IE 9, Safari 6 or below or earlier versions of Firefox) and can be dragged and dropped directly onto the course page if the editing is turned on.

Copying and pasting an image

1. Decide where you want to place your image (roughly), place the cursor there and paste your image.

   1. If you want the image to be centred, then click the 'Align centre' or 'Centre' button (depending on the Editor you're using) to move the cursor to the centre of an empty line and thus ensure that the image is centred.

Uploading and inserting an image

1. Click on the 'Insert or Edit Image' icon in the toolbar; the Image Properties window appears.

2. Click on 'Browse Repositories'.
3. The File picker appears.
4. Use this to select a file, the image should now be displayed. Select 'Upload this File'.
5. The 'Image Properties' window will appear. Add an Image description (this is to make it accessible, so make the description meaningful) or if the image has a decorative purpose, please select 'This image is decorative only'.
6. Click 'Save Image' to add your image.
7. There are some other options on the Image window so select your image and click on the picture icon again.
8. The Appearance tab lets you change the:
   
   1. Alignment, which if set to Left, puts the image against the left margin and has text 'wrap' to its right. Or, if set to Right thrusts the image against the right margin with the text wrapped to its left.
   2. Dimensions of your image. The width and height in pixels are shown in two adjoining fields. Just change the value in one field and the other will change accordingly when you click on the Image symbol which will bring up the 'Image properties' window.
      
      1. highlight it and eight little boxes (handles) appear around the edge. Use the corner handles to resize the image, not the side ones which will only distort your image.
   3. The Vertical space and Horizontal space settings allow you to add some white space around the image - Vertical and Horizontal, described in pixels – try 5 or 10
9. Click on 'Save and Return to course' to save changes.

Add a course image

Course images help to make pages distinctive and orientate students in Moodle spaces.

1. To add a course image, u se the  toggle switch to turn 'Edit mode' on.
2. From the course toolbar, select 'Settings'. Under the Description heading you will find the 'Course Image' button. 
3. Add or upload your course image following the instructions from the previous section.
4. Click 'Save and display'.

Caution

Non decorative images should have alternative text

If the image is not purely decorative, you should describe it so that visually impaired people can understand what the image contains, as this will be read out to them when using a screen reader. it also means that if the image doesn't load, the web browser will display this description instead. You will be prompted to enter a description when you add the image to a Moodle page. This description is known as alternative (or 'alt') text. When thinking of suitable alt text think "What does this image portray?" and then write this in a short (max 140 characters) description.

Examples and case studies

- None at this time.

Questions & Answers

• Read the Text editor FAQs on Moodle Docs.

Further information

- None at this time.

Save

Save