Paul Burgess

A guide to posting images in Wordpress

This is a how-to for inserting images into posts in Wordpress, to act as guide for clients and users tackling this seemingly easy but often tricky aspect of blog posting.

This guide will run through some details about uploading and inserting images and the options available, if you’d rather, you can skip straight to the quick tips for a summary.

All of the image uploading is handled in your site’s admin area, so sign in and go to Posts > Add New or Edit to get started.

A quick note about image width

The first thing to bear mind is the width of your image. It’s possible that the image you are trying to add might be straight from a digital camera, and it may quite large. The image has to be reduced in its dimensions in order to fit into your site. See this example below:

The good news is that this has probably been handled by your web designer in the set up, plus Wordpress can handle the resizing for you. You still need to select the right size when inserting an image, which we will cover a bit later. I just want to get across the importance of image dimensions and how image width is crucial to an image displaying properly on your site, if it’s too wide - it either get cropped or cover up other parts of your site - either way, you don’t want that to happen.

Uploading the image

Let’s move on to uploading the image to the site, ready to be inserted into the post. When creating or editing a post place your cursor where you’d like the image to go in the text area. You will see a range of small icons above the text area, click the first one to fire up the image upload process:

Clicking on that icon will fire up the image upload panel that should look like this:

For this guide, I am presuming the images you want to add are stored on your computer. Click on ‘Select Files’ and browse to the image you want to upload. Select it and it should start to upload. The upload panel will display a progress bar, then present you with options that look like this:

Options for inserting the image

We are now at the stage where we are ready to insert the image into the post. There are a few options to note and set here before we do. You can set them all bu these are the essentials.

Title
Change this to a descriptive title of your image.

Link URL
If you want people to go somewhere when they click the image, you have 4 options. You can write your own link (e.g. http://yourwebsite.com/), or click the ‘File URL’ button for the image to link to a copy of the original. Click the ‘Post URL’ button for the image to link to the post you are writing ( a strange option, but there if you want it). You can also just leave it blank, or click the ‘None’ button for no link on the image.

Alignment
Choose how you want your image to sit in amongst the text. It’s worth noting here that in order for text to wrap around your image, it needs to be roughly half the width of the column you are inserting into, or at least allow room for text to come up around it. That is where this next setting comes in…

Size
This is the most important option when inserting images. The size option determines how big the inserted image will be, or more importantly, how wide. Going back to the notes about image width at the beginning, the image should not be wider than the column that your news/blog is in so choose either ‘Medium’ or ‘Thumbnail’. Again, these settings should have been defined by your web designer.

In most cases, you will want to choose Medium size, this should insert your image at the same width as your website’s column and give a nice sized image that fits well in your site design. Any larger and you will end up with the image overlapping other parts of the site. You could also choose the thumbnail option, and make it look great by aligning it left or right and linking it to the original using the alignment and link options.

Insert the image into the post

Then when you are ready, click the ‘Insert into post’ button (ignore the ‘Save all changes’ button for now) and you will return to editing you text, but you will now see your image in the post. Repeat this process for each image you want to insert and you’re done.

These instructions cover the basics for inserting images into posts, the same principles apply for creating and editing ‘Pages’ too. There are some more advanced options such as inserting image galleries but that is for another time.

References to image alignment and sizes in this article are based on the assumption that you or the person setting up your site has set the options under Settings > Media correctly. If not, you may get some unexpected results.

If you are a web designer or someone who works with Wordpress, feel free to refer your users and clients to this document as a guide.