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.


  • Tutors
  • Course administrators
  • Students

Before I start...


How do I set one up?

Upload, position & resize


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.

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.


  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. 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.
  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 alignment and 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 then Save Changes in the Editor

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: