Frequently Asked Questions

How to add an image using the HTML editor in Moodle.

How to add an image using the HTML editor in Moodle.

The HTML editor enables complex text and image tasks.  For this example, an image will be added to a post within a Glossary, however, the same steps can be followed to add an image to any text, as long as the HTML editor appears to offer help.

Determine where to place the image.


Type the text that accompanies the image (if relevant).

Type an image description or accompanying text if desired, then place the cursor where the image is to display.


Next, click the "Insert/edit image" icon.


Option A, paste a URL for an image file from the web.

image url

Copy a URL into the Image URL field.

Note: Be sure to complete the Image description text for people using page readers for accessibility.


Option B, browse to an image in a folder by clicking "Find or upload an image...."

find or upload an image

This will open the File picker and to select the image to be inserted.


Option C, use the File picker to select an image from one of the repositories.

file picker

Browse for the file, select it, then click "Upload this file" to the course.  Click on the image title in the File Browser.  Once selected, click the "OK" button to insert the image into your text.


After the file is selected, go to the "Appearance" tab to alter dimensions and justification of the image.

appearance tab


Update the layout, spacing, and size of the image by adjusting the settings. Then click "Insert."

appearance settings


Preview image

The preview window should display the image. If necessary, readjust the appearance settings to get the desired results. 


To change the image settings, click the image itself and press the "Insert/edit image" icon in the editor.

After you have made changes to the settings, click "Insert" and "OK" to save.



 Last updated Mon, Jun 8 2015 8:00pm

Please Wait!

Please wait... it will take a second!