How to Insert an Image in a Post or Page

Let’s learn how to insert an image to your page or post easily. Remember you only have to upload an external image when the image that you need has not been previously uploaded to your WordPress Media Library

Step 1: The Visual Editor of your Post or Page to be edited

How to Insert an Image - Step 1

  1. Set your cursor on where you wish your image to appearl. For eg. here I wish the image to appear at the top, so I set my cursor on ‘T’.
  2. Click on the link to Upload/Insert your image

Step 2: Add an Image Window

How to Insert and Image - 2

  1. When adding an image from your computer click on this tab and go to Step 3
  2. If your image has already been uploaded because it has been used somewhere else then click on the Media Library and select your image.
  3. Hit the ‘Select Files’ button your file explorer window (or finder) will come and you will be able to select the file you wish to upload.

Step 3: Add Details of the Image

How to Insert and Image - 3

  1. Add the Title of the Image
  2. Add an alternative text to the image. It can be the same as the Title of your image
  3. Add some description of your image
  4. If your wish your image to open in a seperate window when the user clicks on the image, then leave the link of the image there. However if this is just an image for visual effect then click on the ‘None’ radio button,
  5. Choose the alignment of the image.
  6. Select the size of your image. Usually medium is a good size.
  7. Hit the ‘Insert into Post’ to insert the image into your post
  8. Save you changes.

Step 4: Back to the Visual Editor of your Post/Page

How to Insert an Image in a Page/Post - 4

  1. Hit the Preview button to see what your Post/Page looks like with the new image.
  2. Hit this button to edit the image
  3. Hit this button to delete the image and start over

Step 5: Edit Image Window

How to Insert and Image - 4

  1. You can reduce the size of your image select the percentage you wish to reduce the size too. For eg. selecting 90% will make the size 90% of the current size..
  2. If you click on the ‘Advanced Settings’ tab of this window all the advanced settings will appear. If your website has some standard sizes of images (check out the images in your other posts), then you can set it here by entering the ‘Width’. Leave the ‘Height’ blank.
  3. If your image, when clicked opens into a new window make sure you set the CSS Class to ‘lightbox’ as this is a special way your image will be displayed. Do this only if your theme does not already support lightbox. Most themes from Genesis etc already do.
  4. Don’t forget to Update.

Step 6: Back to the Visual Editor

How to Insert an Image - Step 6

  1. Click on the ‘Preview’ to make sure you ar happy with your image.
  2. Publish your post to make it visible to the web.

← back