How to Put Images Side by Side in WordPress (2022) Easy Guide

Do you wish to use photos in your WordPress article side by side? Beginners frequently have difficulty figuring out how to place two photographs close to each other in their WordPress posts and pages.

Here, you will learn how to put images side by side in WordPress (with or without writing any code).

The Do-Nothing Method

Nothing is easier than doing nothing, which is exactly what this strategy implies. Simply place your photographs side by side in your editor. If this strategy works (it might not), the photographs will appear side-by-side, as seen below.

As previously said, this easy procedure had never seemed to work. It never worked for me when I tried it. It’s never worked for anyone I’ve ever known. So, as a result, I’m guessing that wasn’t planned to happen.

However, it has recently proven to be effective for me. As a result, perhaps something has improved. Or maybe the themes I tried it on were simply more adaptable. (I tested it on a few people.) I’m not sure.

And it doesn’t make a difference. If it works for you, it must also work for others. I won’t waste my time fretting about it if it doesn’t. Instead, simply switch to a different approach.

Employing The Block Editor to Put Images Side by Side

The WordPress block editor is the simplest way to get your images side by side. A unique ‘Gallery’ block in the block editor allows you to show photographs in rows and columns.

To access the content editor, you must create a new post/page or update an existing one. Click the (+) symbol once inside to add a new block.

Then, select the Gallery block and drag it onto your website. The Gallery block can be found under the Common Blocks area, or you can use the search box to find it quickly.

You may now drag and drop images into your gallery block or use the Upload button to upload them. Photos from your WordPress media library can also be used.

We’ve added two photographs to our Gallery section, as you can see. WordPress has automatically stacked them one on top of the other.

What if you want three photos next to each other? When we add a third image, this is what happens. WordPress just resizes the others such that all three can be displayed side by side:

If you add a fourth image, it will be placed below the others by WordPress.

You can adjust the number of photos that should be displayed side by side in a single column in WordPress.

To begin, select the Gallery block if it isn’t already selected. The block options for the gallery can be found on the right-hand side of the screen.

The number of columns can be changed here to any number between 1 and 4. Set the Columns to 2 if you want two photos side by side and two more beneath them, for example.

That’s all there is to it!

Simply click on an image in your gallery to modify its position. You’ll then notice arrows in the gallery that you may use to move it forward or backward.

From our example post, here’s a finished gallery demo:

Built-In Method

This will be referred to as the Built-In Method. It’s just somewhat more involved than the first way, but it should place some space between the photographs instead of running them together if the size of your images allows it. (Perhaps there’s too much room.) We’ll take care of that afterward.)

Simply put, by clicking a button or selecting an option, you may align photos within WordPress.

There are two options for accomplishing this.

Buttons on Editor’s

After importing your photographs into your editor, use the align button in the visual editor mode. For the first image, use left-align, and for the second image, use right-align.

Media Library Options

You can effectively do the same thing using the media library’s settings. Before you insert your photographs into the post, you’ll notice various options near the bottom on the right-hand side when you click on the media icon in the editor.

For the first image, choose left-align, and for the second image, select right-align.

Whether you use the first or second method, your photos should look like this.

You’ll note that a significant amount of space separates the two photos. Therefore, the size of your photographs will affect how much room you have.

Naturally, the smaller they are, the more space between them. (Of course, if they’re too big, they won’t be able to fit side by side.)

Even if your photographs are small enough, there’s a chance that this strategy won’t work for you. If that’s the case, don’t curse it. Simply move forward.

Manual CSS Method

This method requires you to manually insert CSS code, as the name implies. However, this method also allows you to control the space between your photographs.

This procedure can also be accomplished in a variety of ways. We’ll look at two possibilities.

In-Line CSS

This solution embeds the CSS style directly in the picture code. Find the code for your already added photos under your editor’s “Text” tab (the HTML code section).

Each image will most likely be divided into two halves. First, you’ll have the code that connects them. It will begin as follows:

<a href="http://mysite.com/uncat .... >

After that, you’ll have the code for bringing the image in. It will begin as follows:

<img …. >

Put the following CSS code after the img in the second section.

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

Overall, it should resemble this:

<img style="float: left; margin-right: 5px;"

This will move the image to the left and give you 5px of extra space on the right. You can also enhance it if you want.

Apply the same technique to the second image. It will line up beside the first one if you float this one left. However, it won’t run into it because the first one has a 5px margin (or more if you adjusted it).

Each image will most likely be divided into two halves. Then, you’ll have the code that connects them. It will begin as follows:

After that, you’ll have the code for bringing the image in. It will begin as follows:

Put the following CSS code after the img in the second section. Overall, it should resemble this:

Using CSS and a Div

Another way is to use CSS, but instead of placing the code directly into the image code, you wrap each image in a div, which you then style in your Stylesheet.

Create a unique “class” name for your div, such as “side-by-side.” Then encapsulate the first image’s code like this:

<div class="side-by-side">

<a href="http://mysite.com ....> (include ALL the code for the image here)

</div>

Repeat with the second image.

Now, we’ll go to your theme’s CSS file and build the style for the “side-by-side” class. (Stylesheet – css.style) (Appearance > Editor > Stylesheet – css.style)

Of course, if you’re going to start modifying things frequently, it’s usually a good idea to develop a child theme.

In your style sheet, paste the following code.

.side-by-side { float: left; margin-right: 5px }

That’s all there is to it. Again, you should receive the same result as in the previous step.

Using a Plugin to Put Images Side by Side in WordPress

You’ll need a WordPress gallery plugin if you’re using the old traditional WordPress editor or creating more complicated galleries than the basic Gallery block.

Envira Gallery is the most incredible WordPress gallery plugin. Thus, we recommend it.

We’ll use the free version of Envira for this lesson, but you might want to upgrade to the Pro version if you want more advanced features like albums and image slideshows.

The Envira Gallery plugin must first be installed and activated. Check out our step-by-step guide on how to install a WordPress plugin if you’re not sure how.

Then, navigate to Envira Gallery » Add New in your WordPress dashboard.

You’ll need a title for your gallery. Ours is called the ‘Example Gallery.’ After that, you’ll need to submit the photographs you wish to use.

Drag & drop them into the upload box, or use one of the ‘Select Files’ options.

The photographs, once they’ve been uploaded, look like this:

Here’s where you can give your photographs a title and alt text. Then, when the user moves their mouse pointer over your image, the title shows below it.

In the lightbox popup mode, which we’ll look at in a bit, the title also appears underneath the image.

Click the Edit button on an image in the gallery to change the title and alt text.

The title of your photograph can then be changed. It defaults to the filename of the image.

You should also include alt text, which is beneficial to the SEO of your WordPress site. You can just repeat your title for the alt text if your title describes the image.

When you’re finished, make sure to click the ‘Save Metadata’ button before closing the window with the X.

You must first publish your gallery before adding it to the site. So, for example, you can press the Publish button on the screen’s right side.

Now you may either edit an existing post or create a new one. To add a block to your post, click (+) in the content editor and select the Envira Gallery block.

It’s in the Common Blocks area, or you can use the search box to find it. After that, you’ll need to select your gallery from the dropdown menu.

Your gallery should be visible in your post.

On the right-hand side of the screen, you can change the settings. For example, you could want to alter the column arrangement or the amount of the margin between photos.

We chose to present our gallery in two columns at all times. We also increased the space between the photographs.

The viewer can view the full-sized version of an image in a lightbox by clicking on it. They can also use the lightbox to navigate through the photographs.

You can return to your gallery by going to Envira Gallery » All Galleries in your WordPress dashboard if you wish to upload more photographs. To edit your gallery, simply click on its name.

Any modifications you make to your gallery will appear in your posts, pages, and sidebars where you’ve placed them. So you don’t need to include it in these any longer.

Tip: You can still use Envira Gallery if you use the conventional editor instead of the block editor.

Above the conventional editor, you’ll find an ‘Add Gallery’ button that you may use to add an existing gallery to your article.

You can also make a new gallery by selecting ‘Add Media’ and then ‘Create Gallery.’

Use Columns

A column plugin allows you to divide your post into multiple columns, including two columns for each half of the content. Alternatively, you may divide it into two columns, one one-third the width and the other two-thirds the width, and so on.

There are several column plugins available. One example is the Columns Shortcode plugin. After installing the plugin, you may use a shortcode to create two columns, for example. Each column will occupy half of the available area.

You would place each image where it says “…image here…” in the example below.

[one_half] … image here … [/one_half]

[one_half] … image here … [/one_half]

Here’s an example of an image within the shortcodes.

Carry on with the second image in the same manner.

And, of course, the result is a side-by-side comparison of your two photographs.

Using the old Classic Editor?

If you have the Jetpack plugin’s Tiled Gallery functionality active, you can simply generate this look. You may find more information on enabling this feature in this guide.

Click the “Add Media” Button

Create a new Gallery

To make a new Gallery, go to the left side and click the “Create Gallery” option.

Click the “Create a new gallery” button after selecting 2 or 3 photographs.

Select the Tiled Mosaic type

Finally, locate the “Type” dropdown and select “Tiled Mosaic.”

Also Read: How to Use the New WordPress Block Editor (Gutenberg Guide).

Why you shouldn’t use alignment options

These techniques will give you the layouts you want without the hassle.

WordPress galleries are the most straightforward and straightforward method of aligning photographs in a row. Column Shortcodes, on the other hand, Column Shortcodes is a good option that offers more versatility.

Because they both place photos into a new HTML framework, they perform so well together. In addition, unlike the screen used to view them, HTML allows for a side-by-side arrangement to be maintained.

Conclusion

Remember that some of the solutions above may cause your photographs to seem screwed up in various ways. Unfortunately, you cannot do much about it. What matters is that they look good on the front end of the website.

I would, however, double-check everything in a variety of browsers. Of course, you should check out how things look on mobile devices as well. Many factors, including your theme, might influence the final appearance of your published page.

Hopefully, one of the options above will work for you, and the days of futilely trying to get photographs to sit next to each other will be over.