4

How to place images neatly in a row in your posts

I remember coming across this problem of how to place images in neat rows when I wrote my 365 blog. As you will see, many of my pictures are in groups of three:

3 nasturtiums in a row

Groups of six:

6 wildflowers aligned together

Or groups of  nine:

9 roses groups together

Note all the pictures were of the same size: 5cm by 5cm. The reason why I did this was to make them all look equal, so when I placed them in my post they would neatly align next to each other.

First of all, you need to find out the width of your available text area of your blog, either in cm or in pixels, whichever is the easier.

I do this via Photoshop. First take a screen shot of your blog. Then open it up to full size and crop the area that is your blog's text screen into an image. Then upload it into Photoshop (you can use other image applications such as PicMonkey, Canva, Paint or whatever) and check the image size menu to see how wide it is.

My blog text's area width

(There is also the tool Pixel Ruler that helps you measure areas of your blog's screen.)

With this knowledge, I then calculated the best width for my pictures, bearing in mind there will be some white space that naturally occurs between them. As you can see, 15.87cm works very well for 3 x 5cm images. Or, if you like, 2 x 7.5cm, which I also did now and again.

2 images side by side

And you will also note that the height of each image is the same as its neighbour. This will help prevent stepping, which can look messy and unprofessional.

So it's worth taking the time to prepare your pictures in advance before you upload them into your post.

But –

If you don't have the time or the inclination, there is a quicker, more haphazard way.

Take some pictures of varying size and place them into your post all at one go. Select them all at the same time from your computer:

Upload images all at once

And they will simultaneously upload into your Media Library:

Uploading simultaneously into your media library

Upload images all at once 3

And now the crucial bit: make sure they are all ticked, set the alignment to 'None' for each one (found at the bottom of the right sidebar):

Set alignment to None

And click on the green 'Insert into post' button.   In your post's edit page they may appear like this:

3 different sized pictures in a row

But when you click on the 'Preview' button, they look like this:

Cuban Beach Tower of London Poppies Woods in November

Which is not what you want, especially as the theme I use provides me with ample spacing in between my images.

Now you need to adjust the width of each image so they fit in the space properly. Obviously the autumnal tree is too big, or perhaps the Tower of London poppies picture is too wide?

Luckily you can adjust them in situ. Click on an image to 'activate' it ready for editing:

Activated image for editingScalable squares in the corner

And if you look at the corners you'll see some little squares.

Grab the bottom right corner square, and drag it diagonally upwards. The image will start to get smaller in proportion to the rest of the sides.

You will also see the image's dimensions in pixels as you drag.

Showing the pixel dimensions

Which means you can adjust each image fairly accurately so they are similar width sizes.

As it happens the optimum width was 200 pixels to make them sit side by side in the space provided:

200 pixels is the right width

To get the result below:

Cuban Beach Tower of London Poppies Woods in November

Which, I'm sure you will agree, is quite pleasing!

So now it's your turn. You either have the hassle of preparing your images in advance, so you know they are the right size and will look good in a line.

Or you can have fun dragging your pictures to appropriate pixel widths, and checking via the 'Preview' button to see if they fit nicely within your blog's text space.

The choice is yours!

The following two tabs change content below.
Alice Elliott writes the Beginner Bloggers blog for beginner and post-beginner bloggers to “explain things really simply” about blogging and WordPress. She specialises in simple, easy to understand, highly visual courses and tutorials using ordinary, everyday words. Why not also visit her award winning Fairy Blog Mother blog to learn some more.

Latest posts by Alice Elliott (see all)

Sharing is caring

Did you enjoy reading this post?

If you would like to be the first to know about my other exciting blogging events and activities, as well as reading a cool infographic created especially for you, sign up here:

Would you like more comments on your blog posts?
x