LEO Guides

How to insert an image into a Text editor field

To insert an image into a Text editor field you need to:

  1. In the Text editor field, put your cursor where you want to insert your image, then click on the 'Insert/edit image' icon.
  2. Click on 'Find and upload an image' if your image is located on your computer or device, then select your image from the options provided. Alternatively, you can add an image URL if your image is hosted on the Internet.
  3. Enter an image description into the 'Image description' field. NOTE: You should always enter an image description. The image description is able to be read by screen reading software, which are used by people with visual impairments.
  4. Click on the 'Appearance' tab if you want to edit the alignment or dimensions of the image. NOTE: These options are explored in more detail under the 'Other settings' section of this LEO Guide.
  5. Click on 'Insert'. The popup window will close, and you will be redirected to the Text editor field. Your image will now be displayed.

a screenshot of the 'Insert/edit image' popup

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 under the 'Appearance' tab, 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.

There are additional options available to you under the 'Appearance' and 'Advanced' Tabs in the 'Insert/edit image popup'. Some of these are explored below.

Appearance

Alignment

The option you select from this dropdown will dictate how this image will be 'aligned'. Selecting the left alignment means that the image will display on the left hand side of the page, and any text that you add into the Text editor field will 'wrap' around the image on the right hand side. a screenshot of an image which i left aligned, with text wrapping around it

Dimensions

You can enter whole numbers (in pixels) into the 'Dimensions' field to change the size at which the image displays. Click the checkbox for 'Constrain proportions' if you don't want the image to become distorted.

Vertical space

Enter a whole number in this field to dictate the amount of white space (in pixels) that will be left at the top of your image.

Horizontal space

Enter a whole number in this field to dictate the amount of white space (in pixels) that will be left at the sides of your image.

Border

Enter a whole number in this field to dictate the width of the border (in pixels) that your image will have.

Advanced

Alternative image

If you select the 'Alternative image' textbox, you are able to replace the image with an alternative image when people 'mouse over' (hover over the image with a cursor) or 'mouse out' (remove the cursor from the image). To select a new image, click on the 'Browse' icon to the right of the 'for mouse over' or 'for mouse out' text field.