You can embed an image in almost all Moodle locations where the text editing box is available for entering content. This page tells you how to embed an image within a resource or activity.
If you are planning to use an image multiple times throughout a course, upload it to legacy course files.
Optimise your images for uploading to Moodle
A small image loads faster and consumes fewer resources than a large one. Resizing an image is quite straightforward, and doesn't require you to buy specialised software.
- On a PC, you can use Paint to crop and resize images. See the following page for instructions: http://windows.microsoft.com/en-au/windows7/resize-a-picture-using-paint
- On a Macintosh, use Preview. See the following page for instructions: http://support.apple.com/kb/PH5936
- If you want to add an image to each topic or week of your course, keep the size of these images consistent: 150 x 150 pixels is a good size.
When inserting an image, always complete the Image description field in the Insert/edit image window, to maximise accessibility.
Step by step instructions
Use these instructions when you want to include photographs, diagrams or other graphic material in your course via the WYSIWYG editor which is available in most activities and resources.
Graphics can illustrate the point you're making, sometimes more economically than text. They can also provide a visual break on a text-heavy lesson or book page.
Don't go overboard with graphics in your course, though. Some students with poor Internet connections may find it tedious for graphics-heavy pages to load.
Step by step instructions
- Embed an image
- Scale an image (banner example)
- Determine image position
- Copy image between text editors
Once the file you want to embed has been uploaded to a suitable location e.g. theBox or Dropbox, it can be embeded in an activity or resource as follows:
- Within the text editing box, click the Insert/edit image icon
- In the Insert/edit image window, click Find or upload an image.
- In the File picker, click theBox (or other repository location where you store your images).
- If looking for an image in theBox type a search term in the search field and then press the enter/return key on your keyboard.
- Click on the file that you want to embed.
In the selection window:
- Select Create an alias/shortcut so that all instances where the image is used will be updated if you replace the image.
- If necessary, change the file’s Save as name.
- If necessary, change the Author and Licence details.
- Click Select this file.
In the Insert/edit image window, the Image URL displays and the image displays in the Preview box.
- Enter an Image description to display to users who employ screen readers.
- Click Insert. The image displays in the text editor. Once you have saved your changes to this page, the image will display with any other content entered in the text editor, when a user clicks the link for the item.
To ensure that an image adjusts itself to the right scale no matter what browser it is viewed in, you may need to make adjustments to the HTML code. For example, if you are inserting a graphic that will display as a course banner, once it is uploaded as above:
In the text editor, click the Edit HTML Source button in the third row of the text editor function buttons. (If the function buttons don't display, click Show editing tools at the top of the text editor.
In the HTML Source Editor, delete the code specifying the height of the image.
Change the width specification to 100%.
- Click Update.
On the Updating page, save your changes.
You can scale the image as you embed it by completing the Appearance tab of the Insert/edit image window as shown below:
Moodle's text editor auto-generates HTML code to place images to the left or right of the text. To position pictures in relation to text:
- Once an image is placed in the text editor, click the image to select it.
Click the Insert/edit image icon.
In the Insert/edit image window, select the Appearance tab.
- On the Appearance page, at Alignment, select whether you want the image placed to the Left or Right of the text.
- In Horizontal space, type "10".
- Click out of the field. In the Style field, the code "margin-right: 10px; margin-left: 10px;" will display. Adjust this code to suit the alignment—for example, if your image is aligned Left, remove the code “ margin-left: 10px;”, as you only need space on the right of the image, between it and the text. Click out of the field to see the effect of your change on the image-and-text thumbnail.
- Click Update.
If you want the same image to display in two places in your Moodle course, you cannot reproduce it by copying the image's URL from the HTML source code in one text editor into a second text editor. That URL is for a temporary file that exists for a single instance of the text editor. The link will break if you cut and paste it into a second text editor.
You can create a second copy by inserting the image from scratch in the second location, or by duplicating the resource or activity in which the editor box occurs. (When a course/resource/activity is imported, or backed up and restored into a second course, all the images are duplicated, and given their own unique link to the relevant legacy course file.)