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.

On this page:

toc

Print
Keywords: 

Table of Contents
maxLevel2
minLevel2
printablefalse

What is it?


Why use it?


Who can use it?


Before I start...


How do I set one up?

Upload, position & resize

Warning
To follow these instructions, edit your Profile to enable the TinyMCE editor. Tiny is a very good editor you may be happy to stick with - if you can accommodate its two main drawbacks compared to Atto: Tiny won't autosave and you can't easily do equations. It is fine to switch between TinyMCE and Atto as needed.

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.

...

  1. Compress your images first so  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 on Find or upload an image...
  5. The The File picker appears appears.
  6. Use this to select a file, the image should now be displayed.
  7. Add an 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 Click Insert to  to add your image
  10. There are some other options on the the Insert/edit Image window  window so select your image and click on the picture icon again.
  11. The The Appearance tab  tab lets you change alignment and add some white space around the image - Vertical and  and Horizontal, described in pixels – try 5 or 10
  12. The The Advanced tab  tab allows images that change when you 'mouse over', something to try later!
  13. Click on on Update then  then Save Changes in  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 and doesn't have an ugly scrollbar:

...

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.

...

  1. Insert your wide, shallow image according to steps 1-9 on the instructions above - or if you already have an image in place then:
  2. Then to add the extra setting, 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.
  3. Click on the Appearance tab.
  4. Into the Style field, type: max-width:100%; height:auto; - then save the settings. 
    • N.b. the semi colons are important. This short string of code you've just entered will resize the image when the window is resized while keeping its aspect ratio (rather than squeezing it).

Info
titleFurther help

[Editing_text@moodledocs]

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.


Caution


Examples and case studies


Questions & Answers


Further information



Save

Save