Posting Pictures Side by Side with or without Captions

Since I haven’t been in the kitchen much, I thought I would do a blogger tip/trick post.

The longer I blog the more things I learn how to do in blogger. I’ve known how to post pictures side by side in a post for awhile now, but I couldn’t figure out how to put a caption under them. A google search wasn’t much help, so this past weekend I sat down to figure it out. It took a few hours and a lot of trial and error, but I finally got it. I thought I would share the info for anyone else who is having trouble like I was. Now, I am no computer expert, so I can’t say this is the best nor the easiest way to add captions under side by side pictures, all I know is that this is how I did it. And if it worked for me, hopefully it will help someone else.

I know the new editor allows you to drag and move pictures in the compose section but I have trouble getting things arranged to my liking. I find it easier to do it this way, by writing in the Html code in the post.

1. First you need to find out how wide your post area is, so you can make sure your pictures will fit and not be cut off. To do this go to Design-->Edit HTML. Hit Ctrl F to bring up the search box in the upper right hand corner, type in “#main-wrapper {“ to find that part of your template (you could also just scroll down your template and look for the #main-wrapper, but I like the search box because it’s quicker).

Under that main wrapper will be width=(number)px; this width is the width of your post. Mine is 500px. Your’s could vary based on which template you use and/or if you have customized your template. So, since my width is 500px, the total width of my side by side pictures cannont exceed this number.

2. Now that you figured out your maximum width, you can add the pictures to your post. After clicking on "new post," in the post screen, make sure you are on the “edit html” tab. You’re going to set up a table for the pictures. Below is the code I use:

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<center><table>
<tr>
<td>Photo 1 url height=h width=w</td>
<td>Photo 2 url height=h width=w</td>
</tr>
</table></center>
</div>

I type in values for height and width, usually 300 for both, and play around with the numbers until, when I click on preview, I’m happy with the picture size/dimensions. Just make that when added together, your widths don’t exceed the width of your blog. For example, my widths are 250 for photo 1 and 250 for photo 2, so my total width for both pics is 500, and since my blog width is 500, I’m fine. (See photos at top of my post)

Also, I like to center my photos in my posts. If you do not want your pictures to be centered simply delete the <center> and </center> in the above code. In this example, since both my picture widths equal 500px I don't need to center them.

If you don’t want to add captions to your pictures, then your done. But, let’s say you’d like to add labels underneath the pictures. You just need to add some more code for captions. In the code above, add this code (below) directly above the </table>:

<tr>
<td><center>Photo 1 Caption</center></td>
<td><center>Photo 2 Caption</center></td>
</tr>

So your final code should look like this:

<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<center><table>
<tr>
<td>Photo 1 url</td>
<td>Photo 2 url</td>
</tr>
<tr>
<td><center>Photo 1 Caption</center></td>
<td><center>Photo 2 Caption</center></td>
</tr>
</table></center>
</div>

And your photos will, hopefully, look like this:

pear brandy	morsels

(I like to make by text italic, by clicking on the compose tag, selecting the text and clicking on the italic button)

I hope these instructions are clear enough to follow, if anyone has any problems or issues, leave a comment and I will try to help resolve it. Hopefully, I have saved someone else the many frustrating hours of trial and error I went through to figure this out.