Envira Gallery Blog

Digital Photography Tips, Tutorials and Resources

Display WordPress Images Next to Each Other

How to Display WordPress Images Next to Each Other

by Waseem Abbas on Apr 22, 2016

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.

Add Images

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).

Align Left

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:

WordPress Images Next to Each Other Method One

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:

Text on Right

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:

Image Code

Here’s how it looks:

WordPress Images Next to Each Other Method Two

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:

Inline Block Method

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.

Add Image Gallery

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.

Shortcode Information

(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:

How to Display WordPress Images Next to Each Other

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.

Comments

  1. Great post. I was checking constantly this blog and I’m impressed! Very helpful information particularly the closing part ๐Ÿ™‚ I take care of such information much. I was looking for this particular information for a very long time. Thanks and best of luck.

  2. I’ve been searching high and low for how to do this and this article has been the most helpful. However, does this not work for sites/blogs using photos with captions? I have linked my photos and captions to portfolio pieces on my website, and it’s not allowing me to align side-by-side.

    -Brittany

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.