How to insert an image into a text editor field

The Text Editor can include images that are embedded in the content for activities and resources.

Back to Text editor

Images can be added in content you create in the text editor in LEO using the Insert/edit image button.

Images you add should be .jpg, .gif or .png format images.

How to insert an image in the text editor

Position the cursor in the text editor where you want the image to be inserted (either click at the point where you want to insert the image or press Enter at the end of a line of text to move the cursor to a new line).
Click the Insert/edit image button:
To upload an image, click the Browse repositories button.
Click the Upload a file button in the left column, then click the Browse button:
Select the file from your computer. When selected, you should see the name of the file displayed next to the Browse button.
Click the Upload this file button.
Add a description of the image in the description text box that describes the image for screen readers, or click the This image is decorative only checkbox.
Click the Save image button to insert the image into the text editor.

How to modify the image properties

Click the image to select it.
Click the Insert/edit image button.
Modify the settings as required, then click the Save image button.

Positioning images to the left or right

Generally we recommend not repositioning images as it may cause problems when displaying your content.

Typically an image will push all surrounding content above or below it, depending on where it is positioned. You can change this to "left" or "right" to make the image sit to the left or right of the page and have the text wrap around it. This is often referred to as "floating" an image.

How to float images to the left or right

Click the image in the text editor to select it.
Click the Insert/edit image button to open the image settings.
From the Alignment dropdown box, select Left or Right.
Click the Save image button to save your changes.

You should see the image move to the left or right, and any surrounding content will wrap around the image.

How to add padding to an image

Images that are added on their own line (paragraph) will have space automatically added to the top and bottom.

You can add some space around a floated image so that surrounding content doesn't butt up against it, which can improve the readability of your page. You can add vertical space (top and bottom), horizontal space (left and right), or both.

Click the Show more buttons button to reveal the extra formatting options, then click the HTML button.
Find the code for the image. If you're not familiar with HTML, you will be able to find the image code by looking for a green <img> tag, followed by the image location in red (the file name is underlined in the example below):
<img src="https://leotest39.androgogic.com.au/draftfile.php/1205215/user/draft/36426013/activitystarsandinfo.jpg"
After this line of code, add the hspace and vspace parameters, such as in the following example:
- vspace = "10" to add 10 pixels of space to the top and bottom
- hspace = "10" to add 10 pixels of space to the left and right
Click the HTML button again to return to the normal view. You should now see space between the image and the other content.
Save your changes and preview your content to make sure everything looks correct.

Useful tips

It is good practice for you to edit your images to the appropriate size before you upload them to LEO. While you are able to edit how your image displays using the options available to you in the image settings, the quality of images scaled up or down may suffer. Some internet browsers can be unpredictable and may still display the image at full size. This is particularly a problem if you upload a large image, and then resize it to icon size for use within a paragraph.