How do I add images to my pages?

Please note: this guide applies to webpages which use the “classic editor”.

The classic editor looks like this:

If your editing screen looks like this below, then this guide doesn’t apply to you. Instead, see our separate guide on adding images using WPBakery Page Builder:

 

Adding an image in the website editor:

  1. Firstly, if you have a large image, 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 increase the loading time of your webpages for visitors.
  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 the image file from your computer into the screen, or click the “Select Files” button.
  6. Your image will upload within a few seconds.
  7. Alternatively, if you want to use an image file that’s already been uploaded to your website in the past, click on “Media Library” instead.
  8. On the right-hand side of the dialogue, the screen will look similar to this:
  9. 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
  10. Then click “Insert into post”.
  11. You can preview your page by clicking the “Preview” button:
  12. 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
    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.

You can also change the image alignment after you’ve added the file into your page. Simply click on the image and you’ll see this toolbar (highlighted below in red):

Clicking on the icons will change the position of your image.

 

Turning your image into a clickable link:

In the “Attachment Display Settings” box, 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.

 

Editing an image:

To edit an image that you’ve already placed in your webpage:

  1. Click on the image
  2. You’ll see a toolbar
  3. Click on the edit icon (highlighted in red below):
  4. This will bring up the edit screen

You can also resize your image by holding and dragging on the edges (indicated in blue above). However, this is only recommended for small adjustments. If you need to make larger adjustments, we recommend you resize the image on your computer first.

in Website Editor / WordPress

Related Articles