Before we can add an image to a page, we must first add it to the site's Assets Library. This is found in the Content menu of the admin pages.

Adding an Image to the Assets Library

To add a new image, go to the Assets Library and click on the Images folder in the left column. Here you will see a Create button, which drops down to offer Image or Folder. You can use folders to organise your images. For now though let's just add an image without a folder. (We can always arrange the images into folders later if we want to keep things organised!)

After choosing Create then Image you'll see a small form with a Browse... button which you can use to select an image file on your computer. You can upload JPEG, PNG, and GIF files. As soon as you choose a file, a quick built-in editor opens so you can crop, straighten, or touch it up before saving — see the Assets Library page for what it can do.

Give the image a suitable File name. Remember that over time you might have lots of images so make it something meaningful. The Description is optional, if you want to describe the image for screen readers.

Click Save and Publish.

The image is now saved in your Assets Library so you can now add it to a page.

Adding an Image in the Assets Library to a Page

You can insert an image from the Assets Library anywhere that uses the WYSIWYG editor.

1. Click the Insert/edit image button  in the WYSIWYG editor toolbar. The Insert/Edit Image dialogue box will appear.
2. Click the Source button  to the right of the Source field. This opens a second dialogue box showing the images in your Assets Library. (If the image isn't there yet, you can upload it right there using the Or add a new Image form.)
3. Open the folder your image is in and click on the image you want. The second dialogue box will close, and the Source, Alternative description and Image title fields will be filled in for you.
4. If you like, change the Width and Height, or tick Show caption. It's also worth checking the Alternative description actually describes the picture, as that's what screen readers read out.
5. Click Save, and the image will appear in the WYSIWYG editor.
6. Click Save and Publish on the page to see it on the live site.