UCL Logo

UCL Moodle Guides


Moodle Resource Centre - home

General links

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

Moodle Resources

Page tree

Versions Compared


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


  1. The Insert/edit Image window appears
  2. Click on Find or upload an image...
  3. The File picker appears.
  4. Use this to select a file, the image should now be displayed.
  5. Add an Image description (this is to make it accessible to visually impaired users, so making the description meaningful)
  6. To resize your image click on it and eight little boxes (handles) appear round the edge. Use the corner handles to resize the image, not the side ones which will only distort your image.
  7. Click Insert to add your image
  8. There are some other options on the Insert/edit Image window so select your image and click on the picture icon again.
  9. 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
  10. The Advanced tab allows images that change when you 'mouse over', something to try later!
  11. Click on Update then Save Changes in the Editor

Include a banner image

Instructions 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 create find an image which is, say 1500px by 300px (any less wide and it won't . Solvonauts, Flickr Creative Commons search and Wikimedia Commons are good places to look.

The image dimensions should be 1600px (much narrower and it may not reach to the edges on wide screens)of some screens) and its height is up to you (but the lower the better, in terms of page load times). In terms of file size, aim for under 100Kb, ideally around 40Kb - every extra Kb contributes to page load times and this can make a difference on slow connections.

  1. Insert the image according to steps 1-11 on the instructions above (or if you already have an image in place, then 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.
  2. Click on the Appearance tab.
  3. Into the Style field, type: max-width:100%; height:auto; - then save the settings. This resizes the image when the window is resized while keeping its aspect ratio (rather than squeezing it).