Monday, October 18, 2010

Posting Pictures Side by Side with or without Captions


Pin It Now!



PhotobucketPhotobucket


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:


PhotobucketPhotobucket
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.




Pin It Now!

12 comments:

claire said... Best Blogger Tips[Reply to comment]Best Blogger Templates

i am not the most technological person I know... Hopefully I can do this!

sk said... Best Blogger Tips[Reply to comment]Best Blogger Templates

neither am i! but trust me, if i can do it then anyone can.

e-pharma said... Best Blogger Tips[Reply to comment]Best Blogger Templates

thnx

Clazzerati said... Best Blogger Tips[Reply to comment]Best Blogger Templates

amazing! I've been trying to do this for ages but yours is the first one that made sense and was super easy to follow! Thanks xx

sk said... Best Blogger Tips[Reply to comment]Best Blogger Templates

clazzerati--
glad it worked for you! i always worry i will forget a step or my instructions won't be clear enough.

Erik said... Best Blogger Tips[Reply to comment]Best Blogger Templates

I'm so glad I found your post! I've been able to successfully post 3 photos side by side, but I couldn't do so with captions. I used your code and it worked, but Blogger appears to alter the code after I enter it - adding things that I didn't put in there, right in the middle of your code. It still works, but it's been a bit confusing. Have you had any experience with Blogger altering your code after you enter it? In some cases, the added code messes things up and I have to subsequently clean it up to make it work again. Once I delete the 'extra' code, it seems to stay stable after that.

sk said... Best Blogger Tips[Reply to comment]Best Blogger Templates

erik,
i have had blogger compress my code after i post, but i haven't noticed it adding anything. i use photobucket and use the http link to post my pictures. do you use a different photo posting website, other than photobucket? maybe that could be the issue.

J. PRODON said... Best Blogger Tips[Reply to comment]Best Blogger Templates

I have never had a problem posting pictures side by side before until Blogspot changed everything again. I am glad I found your post on this problem and now I can post pictures again.
Joel
http://jaypee1.blogspot.com/

sk said... Best Blogger Tips[Reply to comment]Best Blogger Templates

J.
so glad this post was able to help!

farragio said... Best Blogger Tips[Reply to comment]Best Blogger Templates

This tutorial has been so helpful! I've been searching for how to do this for the last hour and your's is the easiest to understand that I have found.

I was wondering if you could help me with how to add more space in between the images? I don't want all over cellpadding, just in between. Thanks!

farragio said... Best Blogger Tips[Reply to comment]Best Blogger Templates

@farragioJust stopping back by to let you know I figured it out :)

sk said... Best Blogger Tips[Reply to comment]Best Blogger Templates

@farragioi was just getting ready to help you out, but i see you have solved the problem. yay. i'm so glad this post worked for you.

Post a Comment

your comments make my day :)

 

Copyright© 2010-2020 by surlykitchen. All rights reserved.