How to Display WordPress Images Next to Each Other

Last updated on Apr 12, 2016 by Waseem Abbas Reader Disclosure

Do you want to show your WordPress images side by side? Sometimes you may want to align your photos in a row on your website. In this article, we will show you how to display WordPress images next to each other.

Displaying WordPress Images Next to Each Other

There are several different ways to display images side by side in WordPress. Lets take a look at three simple methods…

Method 1: Align Left

First, add your photos to your WordPress post or page. Just click on the Add Media button from the upper left corner of the editor to select the images you want to insert.

Once you’ve selected your images, click on the Insert into post button.

Now click on each image and select Align left to align the images next to each other (you need to be in the Visual tab to do this).

Alternatively, you can select “Left” from the Alignment option (under “Attachment Display Settings”) inside the Insert Media screen before you click on the Insert into post button.

Now your images will automatically display side by side. Here is the result:

There is one downside to this method. If you have text on the same page as your images, it will fill any empty area to the right of the images:

Method 2: Add Custom CSS

By adding your own custom CSS code to your images, you can have complete control over exactly how they are displayed on your website.

First, make sure you are editing your page or post in Text mode (not Visual mode).

In the <img> tag for your images, add the following code:

style= "float: left; margin-right: 15px;"

This will make your images align next to each other with a space of 15px to the right of each image. You’ll need to add this code to all the images that you want to display next to each other, as shown below:

Here’s how it looks:

If you want to prevent text from displaying to the right of the images, use this code instead:

style= "display: inline-block; margin-right: 15px;"

Now, your text will not wrap around your images. Instead, it will look like this:

The only downside to this method is that it requires adding code manually, which can be a bit confusing and time consuming.

Method 3: Using Envira Gallery

Envira Gallery is the easiest method to display your images side by side in WordPress. It even automatically makes larger photos into smaller thumbnails so that all your images look perfect when displayed next to each other.

To start, you’ll need to install and activate the Envira Gallery plugin.

Then, simply go to Envira Gallery » Add New to add a new image gallery in WordPress.

Simply add a name for your image gallery, and add the photos you want into the Images section under Envira Gallery Settings.

Make sure to hit the Publish button to save your changes.

Now you will see a dialog box with the shortcodes and some other information. Just copy and paste one of these shortcodes into the page or post where you want to show your images side by side.

(For a detailed tutorial, check out how to create an image gallery with thumbnails in WordPress.)

That’s it! Here’s an example of how your images will appear on your website:

You can use Envira to display images of varying heights next to each other as well. For our tutorial on that, check out how to create a masonry image gallery in WordPress.

We hope this article has helped you to learn how to display WordPress images next to each other. You may also want to check out our guide on how to create an image slider for your WordPress galleries.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.