Skip to Content

WordPress Pictures Side by Side — Here’s How You Do It

WordPress Pictures Side by Side —  Here’s How You Do It

Have you found yourself frustrated with formatting images in WordPress? Getting WordPress pictures side by side ain’t the easiest of tasks in the Classic editor.

Switch to the Block editor and aligning the pictures can be done in a few clicks. No HTML required.

If you prefer the Classic editor, there is a bit more involved to get your WP images aligned side by side. It isn’t difficult. Just some HTML.

Read on below to discover how to get your WP images aligned using either the Classic or Gutenberg editor.

You can create a gallery in your media library. The Block Editor has a gallery block that auto-aligns images. Adding them in the classic editor merges the pics, but tweaking the HTML to float separates them. Two gallery plugins that work are the Ultimate Shortcodes plugin and Robo Gallery.

 

Switching to the Block Editor

The default WP editor is the block editor. It was rolled out in 2018 with the release of WordPress 5.0.

Given that the Classic Editor plugin has 5+ million active installations, clearly, many users are not keen on Gutenberg.

If you’re one of them, this is one of those times when using the block editor will help.

There is a “gallery” block that lets you insert two columns to have your images aligned.

 

From here, you can then insert images from your media library or upload them directly from your computer.

The images automatically align side by side and the default setting is for three images.

If you only use two, those pictures will be displayed side by side.

The default gallery settings are to show up to three pictures side by side per row.

If you want four images in a row side by side, change the Gallery settings in the right sidebar.

If you want to add more, just keep adding more images. What doesn’t fit into one row will create a second row.

 

Using HTML in the Classic Editor to get images side by side in WordPress

In the Classic Editor, things are different. There is no auto-resizing done. As such, you will not get a neat-looking format unless the images are the same size.

If your sizes are different, insert both images, click the edit icon (the small pencil symbol when you hover an image in draft mode), and change the size to “thumbnail” or “Medium”.

The large size is 1024px x 576px. Those are too large to display side by side on a web page. They will stack instead.

Should you want to have two smaller images displayed side by side and centered, do not align the images to center. That too will stack them.

Instead, switch from “visual” editor to “text” editor and wrap the entire HTML for the pictures inside a <center> tag. That’s before the “<p><img class=”alignnone wp-image-### size-thumbnail” src=”***”

 

Getting spacing between images inserted in the Classic Editor

The next problem you will come up against is spacing. By default, putting images side by side directly in the classic editor joins them together. There is no space between the images.

To get the spacing, you need to insert a floating element to the HTML code.

Rather than centering the pictures, the images are floated from either side of the page.

The HTML code for that is

style="float: left; margin-left: 10px" …

The 10px can be changed to any number you want. The higher the number, the bigger the spacing.

 

Creating a gallery from your media library

The simplest way to get WordPress pictures side by side using the classic editor is to create a media gallery.

Click the add media button, then select the option to “create gallery”.

From there, upload your images or pick the ones from your media library.

 

Use the Ultimate Shortcodes Plugin

One of the easiest ways to insert pictures in WordPress that are aligned side by side is to install the Ultimate Shortcodes plugin.

It has numerous uses. We found it the simplest method to create a text box in WordPress.

It’s made click simple. There are so many elements you can add. The one for aligning your images side by side is (no surprises) the gallery element.

Once selected, a box pops out to fill in the details. 

It shows up to four pictures side by side, depending on the max-width and height settings. These will differ based on your WP theme.

To alter the width, the fastest way is to click on each image, select the edit option and choose the “thumbnail” size, which is 150px by 150px.

Medium is 300px x 300px, which is too big for four images side by side, but it will work for just two pictures side by side. The large size will not work as that has a 1084px width.

 

Get fancier aligned images with the Robo Gallery plugin

Installation

Go to the plugins menu on the left sidebar, select to add new, and search by keyword for “Robo Gallery”.

The full title is “Image Gallery by Robo – Responsive Photo Gallery”.

An extra menu gets added to your WP sidebar. Select the “add gallery/images” option and select one of the six free layout options, then click the “create gallery” button.

 

From here, give your gallery a title, click on “manage images” and it will load your WP media library.

Add your images from there up or upload the ones you want to show side by side.

Scroll down to the next section for the gallery settings and you can set the gallery alignment, padding (spacing around each image), give the pics clickable thumbnails and control various other settings like shadows and even use lazy load for the images.

Once your gallery is created, press publish. To add it to your post, use the gallery shortcode, or click the Robo Gallery button displayed above your post or page title.

The Robo Gallery plugin works with the Classic Editor. It is compatible with the block editor, too, but for just aligning images side by side, it is not needed.

The block editor can take care of that. It does have a few extra features though so even if you are using the block editor, your images could likely be displayed better with this plugin.