How do I add images to my pages?

To add an image within the website editor:

  1. Firstly, if your image is big, then resize it on your computer, before it’s uploaded to your website. Large image files (e.g. straight from a digital camera) may be several megabytes in size and can take a while for visitors to download, so it’ll slow down your webpage.
  2. Open a gap in your writing by tapping the “return” key on your keyboard a couple of times.
  3. Click your cursor into the page where you want your image displaying.
  4. Click the “Add Media” button:
  5. Ensure the “Upload Files” tab is displayed, then either drag and drop your image into the screen, or click the “Select Files” button:
  6. Your image will upload within a few seconds.
  7. On the right-hand side of the dialogue, the screen will look similar to this:
  8. Under the “Attachment Display Settings” box, we normally recommend:
    Alignment = “Centre
    Link To = “None” (otherwise the image will be a clickable link)
    Size = “Full Size
  9. Then click “Insert into post”.
  10. You can preview your page by clicking the “Preview” button:
  11. Then click the “Publish” or “Update”:


How to wrap an image with your text:

Sometimes you want to align an image to the left or right sides. This only works well for small images, around 300px wide.

To do this:

  1. Click your cursor into the page where you want your image displaying, which will normally be at the start of a paragraph.
  2. Follow the steps above to upload your image.
  3. In the “Attachment Display Settings” box, use:
    Alignment = “Right” (recommended) or “Left” (generally looks less good)
    Link To = “None
    Size = “Medium” (recommended) or “Full Size” (only if your image is already a suitable size)
  4. Click “Insert into post”.
  5. Remember to “Preview” your page.


Turning your image into a clickable link:

In the Attachment Display Settings, you can change the “Link To” options:

  • Link To Media File: When somebody clicks on your image, they’ll be taken to the full size copy of the same image. This can be useful when used in conjunction with the “Thumbnail” or “Medium” sizes, so visitors can see a smaller preview image, then can click on the image to open it at full size.
  • Link To Custom URL: This links your image to an address of your choice. For example, you could display a company logo in your page, then visitors clicking on this logo can be taken to that company’s website address. Remember to include HTTP or HTTPS in front of your link, otherwise the link won’t work.
in Website Editor / WordPress

Related Articles