WordPress Image Positioning, Spacing & Alignment – Common Problems and Fixes

LAST UPDATED: August 2016

Ah images.

They cause so much grief in the WordPress editor don’t they? They just don’t seem to do what you expect of them. Unfortunately the WordPress editor is not (yet?) a drag n’ drop interface which is how people (well, Mac users mostly ;) ) expect it to work.

So getting images to do what you want can be tricky. This is not a basic “how to insert an image into a post” article (you can Google that) – this is for folks who know how to add an image, but just don’t understand why it won’t do what they want [insert curses here]! 

Location Location Location

Make sure that when you are about to insert an image, your cursor is the place in your text where you want the image to be. In general it’s easier to insert images after you have written all your text – it will make it easier to visualize where images should go to break things up, and makes the process smoother in general. When working with images and positioning, make sure to use Preview to see how things will actually get displayed on your site. Your edit screen may not be a perfect representation of the width of your content area, for example, and that will make a big difference when trying to position images and text.

Alignment Choices & Examples

Let’s take a moment to look at the implications of each alignment choice. When you go to insert an image you have the following options:

 

Alignment – Center

Let’s start with something easy, shall we? This will simply center the image in the line and your text would go above or below it. No, it does not center the image in the middle of a block of text – who could read that anyway?!

Alignment – None

Setting alignment to “none” means that the image will default to being on the left side of your screen. If you start typing immediately after inserting the image, the text will appear to the right, aligned with the bottom of the image. This is because the image is sitting on the same line as the text. Hit “Enter” on your keyboard right after the image and your cursor and text will go below the image.

In the below example, I want to place an image between the two paragraphs to break up the text.  I’ll place my cursor between the two paragraphs and then go to Add Media.

I select alignment none and get the following result

Note that both paragraphs were in place before I inserted the image. Remember that after you insert an image, your cursor will end up immediately after the image. So if I insert an image with alignment none, and then I start typing, my text goes immediately after the image, at the bottom, because the image and the text are sitting on the same line.

TIP: Sometimes it can be hard to see your cursor after inserting an image, making it hard to add more text. In those cases I just click into the Text tab and start typing in the desired place there – then when you switch back to Visual you’ll be able to find your cursor and the text you added, much more easily.

 

Left / Right Alignment

Left and Right alignment wrap the text around the image so it fits in with the flow of your content.

In the below example I  want the second line of text to line up with the top of the image and the rest of the text to flow around so I’ll place my cursor before the word ‘cupcake’:

 

Selecting “Alignment – left” for the image results in:

I stated at the beginning of this post that your cursor needs to be positioned where you want the image to go. When using Right alignment, however you don’t literally need to put your cursor on the right side of the screen.

You actually place your cursor at the beginning of the line that you want the image sit flush with. Selecting “alignment right” will take care of moving the image to the right side of the screen:

 

Even though my cursor is on the left, when I select “Alignment – Right”, the image is placed on the right side of the screen, aligned with the correct line of text:

Common Problems With Alignment

Here’s something very important that most people fail to understand at first. When you left or right align an image, everything else that follows will be pulled up to flow around the image and fill the space around it. This works just fine when you have plenty of text as in the example above. Problems occur when you do not have enough text to fill the space and you add another image or you want your next piece of content to go below the image.

 

This means if you start typing or adding any other content like another image, it will still be to the right of the image:

The alignment left on the first image tries to suck everything else up around it to fill the space. Only when the space around the image is filled will the content go back over to the left side of the screen. As annoying as some people find this, it’s actually how it’s supposed to work.

So what do you do if you  want your next section of content to start BELOW that image on the left. You might try hitting “Enter/Return” a bunch of times on your keyboard to get your cursor below the image again.  Sometimes you get lucky and that works. But generally WordPress doesn’t really like a lot of spaces so most of the time it eats them up and your image still isn’t in the right place. This shouldn’t be an issue in more recent versions of WordPress, but if you’re using an older version, you’ll need the following solution.

What you have to do is fill that space around the image (or at least make it look that way to WordPress). If you don’t have any more text to fill the space, the best way is to use the Spacer plugin. It actually has code in it that will clear the alignment on the image and reset the flow so that your next piece of content will go below the image. Easy-peasy!

 

 

How To Put Multiple Images On One Line

This one always seems to stump people.

Here’s a quick video demo, or scroll on for the text version!

To put multiple images on one line is not that hard as long as you are aware of how wide your content column is and how wide your images are. Obviously the content column has to be wide enough to accommodate your images otherwise they will bump to the next line.

When inserting images on the same line, I recommend using “alignment  – none”, this will give you more control and make things easier. You can go about this two ways:

1) The easiest way is to go to Add Media, then select multiple images by holding down CTRL (on a PC) or COMMAND (on a Mac) while clicking. You’ll see the checkmark at the top right of each image to indicate it is selected. Don’t forget to select “Alignment – None” on each image,  and then select Insert Into Post.

2) You can alternatively insert your images one by one:  Add Media > select image > Insert Into Post then  rinse & repeat. As long as you don’t move your cursor around in between, the images will end up next to each other on the same line

It will be key to select an appropriate size at which to insert the images. This is what happens when you insert several images that are too big:

I chose the Medium size when inserting them, which clearly is too big for them to fit on one line so it looks messy. So how can I rectify this?

Editing An Image After It Is In Your Post

To edit or remove an image after it’s been inserted, simply click the image. You’ll see several icons appear at the top of the image:

From left to right, they do the following:

• align left
• align center
• align right
• align none
• edit image
• remove image (it doesn’t delete it from your Media Library, just removes it from your post).

After I removed then re-inserted the images at thumbnail size, they are still a little bit too big :

So now I’ll scale each one down. You can do this simply by clicking the image once, then dragging from one of the corners:

This creates the same result as if you were to click the Edit icon, select Custom Size and type in specific dimensions there. WordPress will automatically keep the image in proportion for you, by changing the height for you as you change the width (or vice versa).

 

WARNING: Do not use this to reduce really large images to a small size. This tool does not actually re-size the image and create a new image at the new size. It simply loads in the original size you inserted (with its original file size), but then just restricts the dimensions to make it appear smaller. This means it can impact page load time if you are using it on larger images. If you need to significantly resize larger images, go to the Media Library and edit them there since that will actually create new versions of the image with smaller file sizes.

For small images like the ones in this example, the impact of scaling will be negligible making it an easy way to fine tune sizes. After reducing the size of each image to 165 pixels wide, they fit nicely on one line:

If I were going to do this type of image placement frequently, I would figure out the optimal size for my images and I would resize them correctly before uploading to WordPress.

Centering Side-by-Side Images

By default, if you insert the images in a row as above, they will align with the left edge of the content area. If you want to center them, there are two ways to go.

The easiest method is, after placing your cursor on the line where you want the images to go, click the text-align:center icon. Your cursor will then jump to the middle of the line, and then you can go to Add Media as described above. When you insert the images, they will be centered. Note that you will still select align: none on the images themselves.

If your images are already in the post, you can use the text-align:center button, as long as you create a paragraph around the images first. It’s easy to do that, just position your cursor on the line above your images and hit Enter / Return. Then you can click & drag to highlight the images, and click the text-align: center button:

 

Creating Space and Fine Tuning Positioning

You can see in the screenshot above that the images are flush next to each other, without any space or borders. Your theme might automatically place a border or some space around your images. In this case, mine doesn’t, so I’d like to add some spacing because they look too cramped.

Prior to WordPress 3.9, this was easily edited in the image properties options that you could access on the edit screen. But for some reason they removed that and the officially recommended solution is to install the Advanced Image Styles plugin (it’s very lightweight, don’t worry).

After doing that, when you click on the edit icon for an image, you will have these extra fields:

 

This lets you create space on any side of the image, by typing in the number of pixels you want. No need to type px, just the number will do.

 

I gave mine 10 pixels in-between to provide a little breathing room:

 

Faking Columns

If you want text next to your picture, but you want the text to appear to be in a column, as in the image below, there’s a sort-of hack for that.

In this example, the image is aligned left. But we saw above that the normal behavior would be for the text to float back over to the left of the screen once it clears the bottom of the image. In this example, the text appears to be in its own column. I achieved this by adding a margin underneath the image. This prevents the text from moving back over:

If you do need a true grid layout with rows and columns of content all nicely aligned, you may be better off using a Columns plugin.

 Still have questions? Leave  a comment!

RECOMMENDED PLUGIN: