Side By Side Images in Blogger

(An off-topic post)

This post shows how to change the default layout of multiple photographs or other images in Google Blogger so that they appear side by side on the page instead of sequentially underneath each other. It works for two, three or more images. It can also be used for videos.

There are different ways to do this. Some people suggest using HTML tables, others using an image editor to combine several images into one. I have used both these techniques elsewhere in my blog, but the following is simpler. As well as being simple it has the advantage of keeping the images separate so that if desired any one could be changed later.

First upload your images in the normal way by means of the Insert Image button on the toolbar. Let us assume for now that you have just two images. By default, Blogger displays them consecutively on the page, one above the other as shown below. The issue with this is that readers might have to scroll quite a long way down before they come to the next piece of text.

To put the images side by side, go to the HTML part of the editor. At the top left click the HTML tab as indicated and you will see the underlying code for the page, like this:

You now need to find the code for the images. The file names for mine are Image01.jpg and Image02.jpg and you can see these names each inside the middle of some complicated looking chunks of code. But in between these chunks you can see the following which begins at the end of one line and continues on two more lines (as highlighted above):

                                                                                </div>
           <br />
           <div class="separator" style="clear">; both; text-align: center;">

All you then need to do is to delete this section of code. Be aware that, depending on how you have uploaded your images, the <br /> line might appear more than once or might be completely absent. If there is more than one then delete them all. If it is absent then don't worry. Basically you should just delete everything from </div> to .... center;">.

Be very careful not to delete anything else. Do not delete anything other than </div> at the end of the first line. You might want to make a copy* of your blog post first so you can recover if you make a mistake.

After deleting the code, your images will be positioned like this:

Technically, what this achieves is to place both images inside the same <div> section of the page, rather than in separate divisions as occurs by default. 

You might have problems if your images are too wide for the page layout you are using. You will have to resize them. For example, my images are portrait orientation and set to the Blogger Medium size, but if they were in landscape orientation then they would not fit across the page. The second image would overflow to the next line so they would still appear one above the other. I could get round this by using the default Blogger Small size instead of Medium. 

You can use this technique to place three or more images side by side by deleting the two lots of intervening code. For three images I do need to resize them to Small to get them side by side across the page as shown. This works when viewed on a computer. It might not always work when viewed on smaller-screen devices such as phones and tablets.

To display a greater number of images side by side, even the default Blogger Small size might overflow to the next line. I can get round this by specifying the size of the displayed images directly, but this requires more detailed editing of the HTML code which needs greater care.

The code for each image will look something like the following. It specifies the image size, in this case height="200" and width="133".

<img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrd_oY1BcXPgmgjdGKXBNI6yHwCO5z509MALmHiJMlHNsns3Jq08pHsMhmAua5RRozX5xNyXcP0XQcri8-2qD7MZtZprdKn_9TZN0p3Xs98fKv4m47aB2X6SrZODj2YFFFSHmfNpcRZ-8/s200/Image01.jpg" width="133" />

If I reduce these dimensions by a scale of 0.7 so that height="140" and width="93" then it is possible to place more images across the page.

Readers can always click on the images to look at them full size.

In the above I have also removed the code style="margin-left: 1em; margin-right: 1em;" associated with each image (i.e I have had to remove five instances of this) to reduce the margin spacing and pack them closer together.

The remaining frames and shadows around the images are defined at a higher level - the css level - and will appear on all images on all posts on your blog. It is possible to remove these too, but to do so for a single image is beyond the scope of this post. However, if you want to remove the frames (but not the shadows) from all images on a single page, then insert the following code in the HTML editor at the very beginning of the blog post.

     <style type="text/css">
     .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
     .BlogList .item-thumbnail img {padding: 0; border: none; background: none;}
     </style>

Be very careful when editing HTML. It is so easy to wreck the whole page or lose it irrecoverably. When you have a lot of content it is usually best to play safe and make a backup copy.*

To see another example, I have used this technique for the cigarette card album at the end of my post Cartophilic Concerns. However, the first composite image in that post was put together using an image editor.

Finally, you can also use these techniques to place videos side by side. In the following, the video thumbnail images have been resized and placed within a single division rather than the default two. Again, this has the proviso that it works when viewed on a computer but not necessarily on phones or tablets, or in email feeds.

  

* One way to make an exact copy of a blog post is to go into the HTML code editor, place your cursor anywhere within the content, press CONTROL-A to select all the content, then CONTROL-C to take a copy. Close the window (do not save if prompted), begin a new blog post and give it a name such as 'Backup', go into the HTML editor and place your cursor in the empty window, press CONTROL-V to retrieve the copied content. Save but do not publish the post, then close the window. If you then make a mess of editing the original blog post you can always delete it and rename the Backup with the name of the original.