Adding images

You can upload photographs, illustrations, and other images to your website. These can be useful to provide visitors with some reference material, or to illustrate a point.

Be aware of copyright law when using images. Images found through a search engine are still copyrighted to their original owner.

  • In order to add an image to your website, you will need to log in.
  • Navigate to the page you wish to add an image to, either through the main site or using the ‘Pages’ option from the black sidebar. Selecting ‘Edit Page’ will open up the editor.
  • Select a blank spot in the editor for your image to be placed.

Screenshot of the 'add media' button in the editor

  • Select ‘Add Media’ to open up a new window. From here you will be able to use images that are already in your ‘Media Library’ or you can ‘Upload Files’.
  • You can either drag and drop images from your desktop into the window, or open up a file explorer to navigate through your computer.

Screenshot of the attachment details box in the editor

  • Once selected, your image will open a box called ‘Attachment Details’ on the right hand side of the screen. There are several options that we need to fill in.
  • ‘Alt text’. This option will allow a screen-reader to read out a description of the image. We recommend that you fill in this box. In this example, I have written ‘Screenshot of the ‘Your Data Matters’ logo’.
  • ‘Alignment’. This option decided where on the page your image will be placed. If you wish the image to stand alone, ‘None’ alignment should work. If you wish to embed the image to the side of your text, ‘Right’ alignment should work. You can change these as you wish. Make sure that the body of your text is not affected by the image.
  • ‘Link To’. In most circumstances, your image should only be on the page to complement the text. By default, clicking on the image will open that image in a new tab. We recommend changing this to ‘None’. If you wish to add a link to your image, you can do that here.
  • ‘Size’. Depending on the context of the image, you may wish to make it larger or smaller than normal. You can change the size here.

Don’t forget to click on the blue ‘Insert into page’ button to ensure that your image gets added!

Editing an existing image

You can also edit your picture from within the editor by selecting it and clicking on the small pencil icon.

Screenshot of the edit button when editing an image

This will open up a details box similar to the one we saw when first adding the image. From here you can add alt text, change the alignment of the image, change the dimensions of the image, and add or remove links.

Remember to use the ‘Preview Changes’ button in the top right of the editor. This will allow you to see how well your image fits within the available space on your page without making the changes live.

Deleting an existing image

If you wish to delete an existing image from your page, you can do so from the editor. Simply select the image and then click on the ‘Remove’ button to delete it.

Screenshot of the remove button when editing an image

Don’t forget to click on the blue ‘Update’ button to ensure that your changes are saved.

If your image was set to align with the text, you may need to reformat the page. You can always ‘Preview Changes’ to ensure that your text flows nicely once an image has been removed.