UCL WIKI

UCL Logo

UCL Moodle Guides

Navigation

Moodle Resource Centre - home

General links

Moodle Home
E-Learning services for staff
Quickscan Dyslexia Screening Tool

Moodle Resources

Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Images can be used for aesthetic purposes and this also helps people to identity 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.

...

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 click on the Insert/edit image icon in the toolbar; the Insert/edit Image window appears.

  4. Click on Find or upload an image...
  5. The File picker appears.
  6. Use this to select a file, the image should now be displayed.
  7. Add an Image description (this is to make it accessible to visually impaired users, so making the description meaningful)
  8. Click Insert to add your image
  9. To resize your image click on highlight it and eight little boxes (handles) appear round the appear around the edge. Use the corner handles to resize the image, not the side ones which will only distort your image.
  10. Click Insert to add your image
  11. There are some other options on the Insert/edit Image window so select your image and click on the picture icon again.
  12. The Appearance tab lets you change alignment and add some white space around the image - Vertical and Horizontal, described in pixels – try 5 or 10
  13. The Advanced tab allows images that change when you 'mouse over', something to try later!
  14. Click on Update then Save Changes in the Editor to save changes

Include a banner image which actually fits the page

...

Note

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)

OR

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. The top of a Section, or a Label, often work well.

...

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 charactercharacters) description.

Examples and case studies

...