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

What is it?

Each of the text editors available in UCL Moodle (Atto and TinyMCE) enable use of images as part of the entered text.

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.

Who can use it?

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

Before I start...

To follow the instructions on this page, you will need to edit your Profile to enable the TinyMCE editor:

1. Click your name in the top, right corner of the page.
2. From the drop-down menu, select Preferences.
3. Under User account, click Editor preferences.
4. Choose 'TinyMCE HTML editor'.
5. Click Save changes.
6. You can change this back to the default Atto editor once you have finished inserting images so that your text will auto-save again.

TinyMCE is a good editor you may be happy to stick with - if you can accommodate its three main drawbacks compared to the default Atto editor:

• TinyMCE won't autosave;
• You need to remember to avoid using H1 and H2 heading tags, as these are already used on the page. Start from Heading 3;
• You can't easily do equations. 

It is fine to switch between TinyMCE and Atto as needed.

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, 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 insert an image?

Upload, position & resize

How to upload and place images in topics, then resize them and change their layout on the page. Also where to find image editor applications.

As Alice (in Wonderland) wisely observed: "What is the use of a book, without pictures or conversations?". We recommend you use images wherever you can in Moodle (we will add the conversations another time…) to make your online material more visually engaging.

1. Compress your images first so they don't slow down the page load.

2. Turn editing on and edit the type of page element (Topic summary, label, page etc) where you will get a text editor.

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

   1. If you want the image to be centred, then click the Align center or Center 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.

4. Click on the Insert/edit image icon in the toolbar; the Insert/edit Image window appears.

5. Click on Find or upload an image...
6. The File picker appears.
7. Use this to select a file, the image should now be displayed.
8. Add an Image description (this is to make it accessible to visually impaired users, so make the description meaningful)
9. Click Insert to add your image
10. There are some other options on the Insert/edit Image window so select your image and click on the picture icon again.
11. 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 elsewhere in the Insert/edit image pop-up.
       
       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
12. The Advanced tab allows images that change when you 'mouse over', something to try later!
13. Click on Update to save changes.

Include a banner image which actually fits the page

Banners help to make pages distinctive, orientate students in Moodle spaces which can look fairly samey, and set scenes or moods. Below are instructions for a horizontal image across the top of a section which reaches to the edge of the section, resizes with the window, and doesn't have an ugly scrollbar:

First, find an image. Solvonauts, Flickr Creative Commons search and Wikimedia Commons are good places to look.

The image you find may need to be cropped - its dimensions should be wide (>1600px) and shallow (e.g. 300px) because if it's much narrower it may not reach to the edges of some screens. In terms of file size aim for under 100Kb, ideally around 40Kb - every extra kilobyte contributes to page load times and this can make a difference on slow connections.

Next, choose the place to insert the image. This could be the top of a Section (although its best not to use this area and use Labels instead, because they can be moved, duplicated and imported as required),  a Label, or on a Page, often work well.

1. Insert your wide, shallow image according to steps 1-9 on the instructions above - or if you already have an image in place then:
2. Then to add the extra setting, put the section or label containing the image into edit mode, then to edit the actual image, select that image and in the editor's toolbar click on the Image button; its settings display.
3. Click on the Appearance tab.
4. Into the Style field, type: max-width:100%; height:auto; - then save the settings. 
   • N.b. the semi colons are important. This short string of code you've just entered will resize the image when the window is resized while keeping its aspect ratio (rather than squeezing it).
     
     

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

Further information

- None at this time.

Save

Save