Adding images to your WordPress post or page

Published: June 2014

The latest installment in our once-weekly WordPress series focuses on imagery, and gives a step-by-step guide on how to add them to your post.

1: Upload your image

Once you have written your text content and added it to the WYSIWYG editor, its time to spruce your page up with some imagery. Firstly, place the text cursor in the editor in the place you want the image to appear. Then, click on the ‘Add Media’ icon.

The ‘add media’ icon in WordPress

You will see a pop up screen which displays all of your existing images. All you have to do now is drag your image from your desktop straight into the gallery and WordPress will upload it automatically.

NOTE: once your image is uploaded, you can edit it further. Find out how to edit your images in WordPress.

2: Describe your image

When the image finishes uploading, you will see a short form which lets you add some information related to the image:

• Title: this is the little tag that appears when a user hovers over an image with their cursor, so make it something user-friendly.
• Caption: this is an optional field which, when filled, adds a caption beneath your image. This is useful for briefly describing your image to users.
• Alt text: a behind-the-scenes feature, this text is used by screen readers (a device uitilised by visually impaired users which reads the content of a web page aloud). It should be a clear and succinct description of what is contained in the image.
• Description: depending on the theme you use, your site may or may not use this field. It is a longer description of an image which can be displayed on the page for users to read.

NOTE: Some SEO (search engine optimisation) ‘gurus’ will tell you to add keywords into your image descriptions, but we advise against this practice. It may have helped increase your rankings at one time, but Google is onto this SEO technique now. It regards this as ‘keyword stuffing’ and may penalise your site if it catches you doing it, which it will, sooner or later.

Where to find the image descriptions and positioning in WordPress

3: Position your image

Still on the pop up screen, and below the image descriptions, are fields which allow you to control the following aspects of your image:

Alignment

This controls the position of your image and gives you the following options:

• Left: the image will sit to the left and pull the text beneath up alongside to sit to its right.
• Right: opposite to above, the image will sit to the right and any text beneath will be pulled to sit to the left of the image.
• Centre: the image will be positioned to sit centrally in the content area. All text will remain below.
• None: the image will align to the left and all text will remain below the image.

Link to

Allows you to link your image to another piece of content. You have the following options:

• Media file: clicking the image will open the image by itself in your browser window, at its full size. We only recommend using this if your site is set up to open images in a lightbox effect, or something similar.
• Attachment page: when you upload an image, WordPress creates a page for the image. This links to that page. We do not recommend using this feature as it does not give a very good experience to users.
• Custom URL: a useful option, this allows you to link your image to another page, meaning you can link your image to any page on your site or another website entirely.
• None: this setting means the image will appear and not link to anywhere.

Size

This option allows you to set the image of your size, at either thumbnail, medium or full size.

4: Check and save!

Once you are happy with how your image will be dispalyed, simply click the  green-blue ‘Insert into post’ button. This will close the pop up screen and you will see the image has been added into the editor. If everything is okay, click ‘Publish’ (or ‘Update’ if the page was already live on the site) and you’re done.