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. I’ve had a few questions about this recently, meaning it’s time for a closer look at how this works. 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]!
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.
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:
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?!
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 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:
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.
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!
This one always seems to stump people.
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?
To edit or remove an image after it’s been inserted, simply click the image. You’ll see two icons appear on the top right of the image. The one on the left takes you into image editing. The one on the right removes the 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 can scale each one down. The scaling tool is at the top of the Edit Image window. It lets you reduce an image size by percentage.
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 70%, 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.
You can see in the image above that this particular theme gives the images a border and a little bit of space around the image. However I can fine tune the spacing even more because they still look a little too close together.
Once you are in the Edit Image window (as shown in above screenshot), click on the Advanced Settings tab where you will find the vertical and horizontal space options:
This lets you create space to the side or above/below the image. For example, if you type 10 in the horizontal space box it will add 10 pixels of space on either side of the image. After you type a number, click anywhere else in the window – as soon as you do so, look in the Styles field and you’ll see your number translated into margin-left and margin-right with the number of pixels you specified. So if you want a different amount of space on one side of the image than the other, you can just adjust those numbers as needed in the Styles field. Vertical spacing works the same way.
I gave my images 10pixels of space on either side, to give them a little breathing room:
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 space 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!
Hi! I'm Lucy Beer. I know that WordPress is liberating when you know how to use it, and bewildering when you don’t. I help individuals and businesses learn WordPress for their specific needs. I will accelerate your knowledge and cut your learning curve in half (at least!). Generic tutorials and videos only go so far - when you need specialized knowledge, or a real person to answer your questions, that's where I come in. I help non-techies understand and use the web to empower their personal or business mission.