Embed an Image in Moodle

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 can 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

Embed an image

Once the file you want to embed has been uloaded to a suitable location e.g. theBox or Dropbox, it can be embeded in an activity or resource as follows:

1. Within the text editing box, click the Insert/edit image icon

2. In the Insert/edit image window, click Find or upload an image.

3. In the File picker, click theBox (or other repository location where you store your images - on mobile devices you can also select the camera if available).

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

1. Click on the file that you want to embed.

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

s

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

Scale image (banner example)

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:

1. 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.
   
2. In the HTML Source Editor, highlight the code specifying the height of the image and press "Delete" on your keyboard.
   
3. Change the width specification to 100%.
4. Click Update.
   
5. 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:

Determine image position

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:

1. Once an image is placed in the text editor, click the image to select it.
   
2. Click the Insert/edit image icon .
3. In the Insert/edit image window, select the Appearance tab.
   
4. On the Appearance page, at Alignment, select whether you want the image placed to the Left or Right of the text.
5. In Horizontal space, type "10".
6. 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.
7. Click Update.

Copy images between text editors

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