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:
Groups of six:
Or groups of nine:
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.
(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.
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.
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:
And they will simultaneously upload into your Media Library:
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):
And click on the green 'Insert into post' button. In your post's edit page they may appear like this:
But when you click on the 'Preview' button, they look like this:
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:
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.
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:
To get the result below:
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!