Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.
Image alignment is a constant struggle for the WordPress blogger.
This post is for anyone who has spent more time than they’d care to admit fiddling with image alignment and positioning in the editor.
The two best methods to align images
There are two techniques you should consider for placing images next to each other. I’ll share how to use each one as well as the pros and cons included.
1. Align images with a gallery
The most reliable method for placing images side-by-side is to use a WordPress gallery.
If you’ve never created a gallery before, follow this tutorial on how to create galleries.
The trick is to use a medium-sized version of the images and choose two columns, even if you are including just two images. The result will look something like this:
Unlike images that you place into your post, galleries have special HTML that keeps the images next to each other. This structure makes it easier and less of a hassle to align the images into rows/columns.
2. Place images with Column Shortcodes
If you don’t mind adding a new plugin to your site, Column Shortcodes is a great solution for aligning images.
Column Shortcodes is one of those awesome plugins that doesn’t fill up your site with new menus. In fact, the only thing it adds to your admin dashboard is this convenient button above the editor.
To show how it works, I’ll create a single row of three images.
How to use Column Shortcodes
The first step is to place your cursor on an empty line in the editor. Then click on the shortcode button and select a column option.
Repeat this step to add a second 1/3 column and then repeat once more but this time using the one-third (last) option. The result is the following shortcodes added to the editor.
If you’ve never used shortcodes before, you may want to follow this tutorial first.
As you can see, each shortcode has an opening and closing tag. Now you can put an image inside each shortcode, like this:
Looks like a mess, doesn’t it?
That’s because the shortcodes can’t style the images in the editor, but it’s not a problem. Once you view them on the site, they’ll align neatly into columns, like this:
Column Shortcodes compared to galleries
While the shortcodes don’t display nicely in the editor like galleries and can be more of a challenge to work with, you also get a bit more control. For instance, galleries force all images to link to:
- Media file
- Attachment page
- Nothing
With the columns plugin, images can have custom URLs and each link to a different type of page.
You can also mix-and-match the columns. For instance, you can place one image in a 2/3 shortcode next to a picture with a 1/3 column shortcode.
Why you shouldn’t use alignment options
These methods will produce the layouts you want without all the headaches.
WordPress galleries are the simplest and easiest way to align images in a row. However, Column Shortcodes is a good alternative that provides more flexibility.
They both work so well because they place images into a new HTML structure. The HTML makes it possible to maintain a side-by-side layout, regardless of the screen used to view them.
Is there something I missed? Have any questions? Post a comment below.
