UCL Logo

Page tree

Versions Compared


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


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