Keywords: image, graphic, alternative text, context, visualisation, visual, infographic, graph, chart
Each of the text editors available in UCL Moodle (Atto and TinyMCE) enable use of images as part of the entered text.
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.
Images can be added by anyone while using the text editor.
To follow the instructions on this page, you will need to edit your Profile to enable the TinyMCE editor:
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:
It is fine to switch between TinyMCE and Atto as needed.
The UCL Connected Learning Baseline suggests the following for Structure:
The Accessibility category suggests that you:
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.
Compress your images first so they don't slow down the page load.
Turn editing on and edit the type of page element (Topic summary, label, page etc) where you will get a text editor.
Decide where you want to place your image (roughly) and place the cursor there.
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.
Click on the Insert/edit image icon in the toolbar; the Insert/edit Image window appears.
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:
For this, you need to go into your Moodle profile and enable the TinyMCE editor (it's a great text editor - many extra functions for tables, for example - but not currently our default in Moodle)
if you feel comfortable modifying the HTML code directly, switch into HTML view using the <> button and add the style code in bold below to the style tag of the banner image, removing any other styles already in this tag.
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.
TinyMCE editor guidance is also available from moodledocs, if you are using the non-default text editor.
If you find any inaccurate or missing information you can even update this yourself (it's a communal wiki).
If you have a specific question about the tool please contact the Digital Education team.
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.
- None at this time.
- None at this time.