How to Align Images Side-by-Side in WordPress

Is your blog ready for a new theme?

Download any of our themes now for FREE.

View Themes

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:

Screenshot of an example gallery

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.

Screenshot of the Column Shortcodes plugin page

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.

The button added by Column Shortcodes

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.

Displaying how to add a column shortcode
Creating a row with three columns.

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.

Shortcodes in the editor

If you’ve never used shortcodes before, you may want to lfollow 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:

Images in shortcodes in the editor

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:

Example of images placed into columns

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.

Be First to Comment
    Post a comment

    Your email address will not be published. Required fields are marked *