--------------------------------------------------------------

Sunday, April 1, 2012

How to Format Your Images Into Rows - My Bloggiesta Tip

I've actually had a few people ask me about formatting photos, which is totally surprising, considering I'm not exactly the most savvy of bloggers.  So, I thought I'd tell you a little about how I do it (obviously in blogger).  Plus, bloggiesta is the perfect time for that, even if I'm not really participating due to moving this weekend.

Want your images to line up like this?
First, nearly all of my book cover photos come from Amazon affiliates pages, so that's what I'll show first.  To get them all lined up in the middle, here's what I do:

I can usually only fit about three across (of the large sized covers) on my blog format, so that's what I stick to.  You can play around with yours to see how many fit on your blog.  I copy and paste the html from the amazon links (um, in html mode, obviously).  They generally come without any alignment formatting (ie not automatically centered), but with loads of weird extra code, so both good and bad.  I usually will paste the three photos all in a row, putting one space between their codes. 

Then, when I have all three together, I will center them, by putting the html text in instead of using blogger's centering feature (ie: <div style="text-align: center;">).  I've had issues with blogger's centering option when I try to get all three centered together, so typing the code myself is generally the easiest.  This puts the three images all in the same <div> and centers them all together in a row.  To do multiple rows, I generally do one hard return between each set (<br/> in html), but more space can easily be added either in html mode or compose mode.  Then I start a new <div style="text-align: center;"> for the next set of three and so on.  Here's what the code looks like (in html mode, of course):

<div style="text-align: center;">
<img 1 code> <img 2 code> <img 3 code>
</div>
<br />
<div style="text-align: center;">
<img 1 code> <img 2 code> <img 3 code>
</div>

Now, for images that you add using blogger's insert image button, these will come automatically formatted, which can be good or bad.  They generally don't let you line up images neatly together, but put only one per row.  This is what the code looks like when an image is uploaded:

<div class="separator" style="clear: both; text-align: center;">
<a href="IMG LINK" imageanchor="1" style="cssfloat: right; margin-left: 1em; margin-right: 1em;"><img border="0" dea="true" height="192" src="IMG LINK" width="320" /></a></div>

Some of that extra stuff just gets in the way of what I want, so here's my method of fixing that:
Essentially, I will put the three images (or however many you want per row) all in one <div> - and I usually replace the <div class> code above with the shorter and simpler one from above, <div style="text-align: center;">  Putting multiple uploaded images in the same <div> will require you to delete the <div> code from the other uploaded images, since they all come with it attached (both the opening tag <div class, etc> and the closing tag </div>).  I also usually change the "margin-left" and "margin-right" to "0em", since I find it adds a little buffer around the edges of images that interferes with my alignment.  So here is what three uploaded images' code would look like:

<div style="text-align: center;">
<a href="IMG LINK 1" imageanchor="1" style="cssfloat: right; margin-left: 0em; margin-right: 0em;"><img border="0" dea="true" height="192" src="IMG LINK 1" width="320" /></a> <a href="IMG LINK 2" imageanchor="1" style="cssfloat: right; margin-left: 0em; margin-right: 0em;"><img border="0" dea="true" height="192" src="IMG LINK 2" width="320" /></a> <a href="IMG LINK 3" imageanchor="1" style="cssfloat: right; margin-left: 0em; margin-right: 0em;"><img border="0" dea="true" height="192" src="IMG LINK 3" width="320" /></a>
</div>

And that's it!  There is obviously other code there I could likely get rid of, but since I'm not sure what it all does, I figure it doesn't hurt to leave it :)  You can also change the size of the images from the code as well, but be warned it doesn't keep the height/width ratio the same, so they could look stretched. You can also put the images all together on the right or left by changing "center" in the <div> code to "right" or "left."

Anyway, hope this helps some of you align your images into rows!  Let me know if this was totally confusing or if you have any other questions.  

If you buy through my Amazon linkage, I will get a very small percentage

23 comments :

  1. I am mighty impressed with your knowledge of html! One of my summer goals is definitely to learn some basics in hopes of getting rid of formatting headaches and enabling more personalization.

    Great mini-lesson!

    ReplyDelete
    Replies
    1. Ah, thanks. My html knowledge is pretty rusty, but I did take a class for my Masters. Hope you get a chance to learn more sometime.

      Delete
  2. I've been dying to learn how to do this. Thanks for sharing!

    ReplyDelete
  3. What a great tip! I will definitely try this. Thank you.

    ReplyDelete
  4. Too bad you don't have tips for wordpress as well! :--)

    ReplyDelete
    Replies
    1. Yeah, I've no knowledge of Wordpress, but I assume the html is similar enough to work. Just make sure you have all the image codes in the same "div".

      Delete
  5. I'm going to have to decipher this and try it. The photo business has been bothering me for quite a while! Thanks for the tips.

    ReplyDelete
    Replies
    1. Let me know if you need further clarification :) Sorry if the post further confused you!

      Delete
  6. oh my gosh this has been something I have banged my head against! I will have to try it...

    ReplyDelete
    Replies
    1. Ooh, hope this helps and doesn't make things worse :)

      Delete
  7. This is such a great tip! I use WP now, but I remember when using Blogger that's it's extremely difficult to get it to cooperate. I'm sure this will help a lot of people! Maybe next time we need to have you host a mini-challenge! ;o)

    ReplyDelete
    Replies
    1. I would have volunteered if I thought it would be clear enough and somewhat helpful :)

      Delete
  8. Great tip! I've often wondered how you do this ...

    ReplyDelete
    Replies
    1. I was actually really surprised by how many people were interested, I guess I thought everyone did this stuff :)

      Delete
  9. I LOVE YOU! I've been trying to figure out how to fit more than two images on a line for ages, and with no knowledge of html it's been slow going, as you might imagine. Your instructions (found via google search) were so clear that I just copied and pasted a few lines into the unfamiliar html window and *poof*, it's done. A million thanks!

    ReplyDelete
  10. This has been bugging me for ages. I just got around to trying to figure out how to do this, and your post was the first that came up. Worked like a charm--and I love that a book blogger's tips from last year's Bloggiesta came up before anything else in my Google search. :)

    Thank you!

    ReplyDelete
    Replies
    1. Glad I could help! And so happy that bloggiesta is getting lots of mileage :)

      Delete
  11. This is so simple and worked beautifully. My site will eventually have lots and lots of photos, so I needed something simple (that will work in different browsers).

    Thanks so much!

    ~jnana shiva
    http://youreyesglisten.blogspot.com

    ReplyDelete
    Replies
    1. PS I put a thank you for you on my site :)

      Delete
  12. Yay! I have been trying to figure this out FOREVER. Thank you so much!

    ReplyDelete

Love it when you comment!

Related Posts Plugin for WordPress, Blogger...
Copyright © melissa of One Librarian's Book Reviews 2008-2015