Sunday, May 07, 2006

Tip: How to display images side by side

If you want to display images side by side, you will have to use table to do the layout. For example, to display the 2 logo below side by side

Blogger for DummiesNatural Remedies


To display the above 2 photos, it must firs be hosted on the web. This can be done by Blogger (refer to Getting New Blogger to host your images for the profile, sidebar, header, etc. or host it with a third party host like Photobucket. Then you must get the URL ready.

Next, you must find out the width of your main column. To do this, you must get into the template editor and look for this block of codes:

#main-wrapper {
width: 400px;
margin-left: 20px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

This tells me that the width is 400 pixels and I must make the width so that together they will fit in the column. In this case, I have chosen to make the width of the 2 images 180 pixel wide each. I have two choices of doing it. Resize the image to the proper width first with a photo editor like Irfanview, then upload it to the web, or leave the size as it is, then add a width="180" attibute to the image tag, like this: <img src="image URL" width="180" />. The height will automatically be resized to keep the aspect constant and so can be left out.

To display the image above, I put them into a HTML for a 2 column table, with the <img> as the contents. I show an example below

<table>
<tr>
<td><img src="photo1 URL" width="180" /></td>
<td><img src="photo2 URL width="180" /></td>
</tr>
</table>


replacing photo1 URL and photo2 with the actual URLs of the logo. Also, I have shown the HTML for the table in different lines to make it easily understandable. If you actually write the table this way, what is going to happen is there will be a large empty space above the table. You would have to write the HTML for the table in one continuous line without pressing the ENTER key.

Actually, the 2 logo above have been made into hyperlinks. Click on it and see what happen. It will take too long to explain it, but if any of you are interested, comment in the post and I will make the effort to explain it, perhaps in another post.

Books from Amazon

Photo blogging: SplashPhoto and SplashBlog help consumers share images on the Web.(services of SplashData Inc.) : An article from: Digital Imaging Digest [HTML] (Digital)

Videoblogging For Dummies

Buzz Marketing with Blogs For Dummies (For Dummies (Business & Personal Finance))

NEWER POST    OLDER POST

82 comments:

  1. Actually, I have done it sometimes by simply moving around the photos on the edit tab with the cursor, after uploading from Flickr I think -a bit easier to tinker about than the Blogger uploaded pics.

    I shall give your method a try, though, as it seems tidier and a chance to use tables -I rarely do!

    Thanks for a new tip! ;-)

    ReplyDelete
  2. hi peter, sorry for bothering you again and again...i have downloaded blog template from www.bloggingthemes.com in zip format, i filled my url in the blank box before download it. then what should i do to apply to my blog...?

    http://orosdiono.blogspot.com
    thanks peter

    ReplyDelete
  3. www.bloggingthemes.com is for Word Press. You are using Blogger. You can't use themes from www.bloggingthemes.com for your blog.

    ReplyDelete
  4. Hi Peter

    I have now twice used your table method to display photos in my posts side by side, but now I find that if I click on them, they do not open in a new page. My main reason for these photos is so that my visitors can get a "close-up" look at the items I show them.
    I uploaded the photos from my computer into a new post and then used the second URL to paste into the table. Also tried the first one for a bigger picture size, but then the photos displayed in the post itself, are way too big.

    It was not even necessary to save as a draft or publish before using the URL as described in your image hosting post. Can this be the cause of the problem??

    Any suggestions on this???

    Thanks

    ReplyDelete
  5. Why don't you paste the URL to your post and let us have a look.

    You have to rescale the photos to fit into th page. See post Using Irfanview for you blog

    Peter aka Enviroman
    Enviroman Says

    ReplyDelete
  6. Hi

    Sorry, I do not understand so well. You mean create a new post and just paste the photo URL into the post and publish???

    And then we can see if it will open in a new page???

    I normally rescale my main photos to 600 pixel width and then the smaller ones to 320 pixel width in a program I have on my computer.

    When I upload then, I use the medium image in Blogger.

    Anyway, I will go and try your suggestion.

    thanks

    ReplyDelete
  7. How do I keep the pictures in the center? Now they move to the left.

    Thanks!

    Maria

    ReplyDelete
  8. Not very sure what you are asking, but if you are referring to using table to display the images, and you want it in the center, surround the table HTML with <center> and </center>, that is:

    <center><table>..
    ....</center>

    Or refer to this post Uploading and manipulating images Part 2.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  9. Yes, that's exactly what i meant!

    Your blog is very helpfull, thumbs up. :)
    Thank you very much!

    ReplyDelete
  10. Hi Maria,

    Glad the tip helped you.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  11. i tried but the images are far too big? here is wat i did?

    1.upload pics through blogger as norm (without any alignment)
    2. copy the table html and paste
    3. cut and paste source img into the html

    publish
    though the pics are side by side but they are not common size in size, so do i need to resize them or crop them and at wat width or size do i hv to make them or can i make them to fit automatically?

    thanks

    ReplyDelete
  12. Hi Bidarlah,

    I think I will have to add how to do it in the post. Check back later.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  13. From Peter 2 to Peter 1. Ha! Got it, thanking you! I puts two buttons with links next to each other rather than below each other.

    I added another page element & now have two other buttons below it.

    Did not know about tables until now. I suppose if you have columns you should be able have rows. I will work on that.

    Me at:
    http://stvincentsdarlinghurstmalenurses.blogspot.com/

    If you want to see it in action.

    ReplyDelete
  14. Hi Peter,

    Congrats. Actually you can put 2 rows of buttons in a single HTML/Javescript Page Element. Get an idea of how by looking at the HTML script for table at
    How to avoid large white space above table in Blogger

    How to avoid large white space above tables in Blogger Part 2

    Ignore the CSS in the second post.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  15. Hi, Peter - I have been trying and trying to find a way to do this, but it's not working for me...I want to link to a series of photos that spell a word, but when I try to use the "table" method, I'm not really sure WHERE to put the table in the HTML editor (I don't know anything about using HTML).
    I also don't want this in an entry; I want it right below my blogger header...got any suggestions? Thanks!
    -Seanna

    ReplyDelete
  16. Hi Seanna,

    You may want to consider thumbnails. Instructions are given at Irfanview for making thumbnails. Then you don't have to bother about HTML. You just save the image and upload them to wherever you want them. If you want them below the blog title, consider Adding graphic, advertisement, banners, etc. to your blog Header. All you have to do is to click Add a Page Element and if you use HTML table, use a HTML/Javascript Page Element. If you use image (thumbnail), use the Picture Page Element. I would encourage you to pick up some HTML. It is not difficult and it will help you understand what you are doing and give you more flexibility. You can learn as you read my posts in my blogs or a very good place to learn is w3schools.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  17. I can't wait to try this one out, I've been looking for this! I'll let you know how it goes. I guess one can keep adding more and more lines going down the page? In any case, I'll try for myself and see.

    ReplyDelete
  18. Hi Smiler,

    Hope I see you smiling now. Actually, this method can be used to publish multiple images in multiple columns and rows if you understand how to use <table> tag and how to resize images with Irfanview to fit the space. So if I understand what you say, I think you got it.

    Peter Blog*Star
    Digital Candlelight Vigil

    ReplyDelete
  19. Hi Peter,

    posting images side by side worked without trouble, but I didn't manage to add lines, so ended up doing each line individually. Also, one thing I've started doing to simplify my life is when I want to do a special layout with my visual I just do it in an image editing program (Photoshop in my case) and then upload to Photobucket or Flickr. I just like to go for the simplest solution whenever possible. Of course, that way I lose the ability to keep the images as links, but so far it hasn't been an issue.

    Thanks!

    ReplyDelete
  20. Hi Smiler,

    Want an example of 2 rows 3 column of images?

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions_
    (Blogger FAQ in progress. More will be added as I have the time)

    ReplyDelete
  21. Hi Peter,

    it’s not something I need for the immediate future, but it might come in handy eventually and I'm sure other bloggers would find it useful too — would you consider adding it to this post? Only if you have time for it.

    ReplyDelete
  22. Thanks a lot for this! :)

    ReplyDelete
  23. I'm trying to use your two column table to post contributors pictures to a group blog (i.e. pictures in the sidebar). Did you ever do a post on how to tie a hyperlink to the picture? I could sure use that

    ReplyDelete
  24. Thanks for the tips. It was very helpful!!

    ReplyDelete
  25. Wow. This helped A LOT! I've tried other tips on the internet and they just haven't worked for me. This was very helpful and the instructions were clear. Thank you so much!

    ReplyDelete
  26. I'm not at all experienced in HTML but I want to display my "Facebook Follow" and "Twitter Follow" buttons side by side on my sidebar. Of course I want to link the buttons to my Facebook and Twitter pages respectively. But I have no idea how to do this! I don't like how much room it takes up when I just add them as a "Picture Gadget" with an associated link b/c they are stacked vertically.

    Does this make sense? Please help me!!

    ReplyDelete
  27. Ok, so I actually figured this out (I'm new to blogging and HTML!) but I REALLY want to make my pictures hyperlinks. Please give me the nitty gritty, VERY detailed instructions on how to do this!!

    ReplyDelete
  28. Well got to admit I am a Facebook dummy and Twitter dummy. Can you give me the button image and the URL to which they should be linked? If you can't do that in a comment, send it by email attachment to bloggerfordummies at gmail dot com

    ReplyDelete
  29. Peter - I sent you an e-mail to bloggerfordummies about how to make my side by side images into hyperlinks but I haven't heard back yet. I completely understand that you're busy, but I am really looking forward to your directions on how to make my side by side pics into hyperlinks! Thank you so much! You've really helped me a lot!

    ReplyDelete
  30. Same as described in this post but with <img src="photo1 URL" width="180" /> surrounded by the hyperlink tag <a> and </a>.

    Refer to making bookcover image link to Amazon which would be the same except that the bookcover will be replaced by your facebook and twitter image.

    If above too complicated, post a comment again for clearer instructions.

    ReplyDelete
  31. DUDE! This was exactly what i was looking for! there is just one question i have, HOW DO I HET LINKS ON EACH PIC? I tried the way u said on the other post but i didnt work with this html code! PLEASE RESPOND!

    ReplyDelete
  32. Peter, your posts are quite helpful. Just to take this one step further, my question is as follows:

    The white space I am trying to avoid is between photos and between rows in my table of pictures. I am looking to create a table of photos with no borders or spacing between columns or rows. I think I have 2 issues. The first is the small border around the image, and the second issue is the large space between rows (actually above and below the image in the table cell, making it look like space between rows.) thanks! see my blog test below.
    http://thesancarlosgarden.blogspot.com/2010/01/test-table.html

    ReplyDelete
  33. I tested that at Testing Blogger Beta and I don't get that wide separation between rows? The border, although the attribute border="0" had been added, the border is still there. This probably need to be done in the template CSS which I will check later.

    ReplyDelete
  34. I am trying to put the affiliates 120 x 120 box in the side of my experimental website but i can only put three how can i put four 120x 120 on it...here is my site
    http://amazingthingsonline.net/the-cms/make-money-online...in my sponsored section i want to put 6 banners. is there any plug-ins for that..i can do image side by side i cant put another two image in the next row.

    ReplyDelete
  35. This post teaches you how to use <table> tag to put images side by side. It can also be used for other things like affiliate links or banners in any number of axb arrays by adding on to the table. Ask again if you don't know how to proceed.

    ReplyDelete
  36. AWESOME! Love your blog, it has helped me so much! Thank you!

    ReplyDelete
  37. Hi there!

    I'm trying to add two images which are hosted on photobucket to my sidebar, side by side. With the html you provided, how do I then link the images to a desired website (other than photobucket where they're stored)?

    I'm not sure what code to use!

    Thanks!

    www.lostincheeseland.com

    ReplyDelete
  38. Refer to how to make clickable picture. Thus just replace <img /> with
    <a href=""><img /></a>

    ReplyDelete
  39. Thank you Peter!

    One last question - once the photos are side by side, what code do I insert to put a tiny space between the images (so they aren't attached to one another)?

    Thanks!

    ReplyDelete
  40. Now I have never tried this before but try adding some inline CSS

    Try <table style="padding:5px;">

    Do let me know if that works.

    ReplyDelete
  41. A thought occurred to me that the above is for the table overall which I believe will be the table boundary. The CSS may have to be applied to the tabel data tag <td>

    ReplyDelete
  42. Peter, I'm not quite sure how to do that. Where in the code to make a clickable picture would I place the table code to separate the two images slightly?

    ReplyDelete
  43. Send me the codes you used to display the 2 photos side-by-side at contact me and I will test it out

    ReplyDelete
  44. Hi. I need to post multiple photos across my title bar just above the title description. I can only post one image now. Help me.

    ReplyDelete
  45. I meant the header.I need to add several images after my blog title but before the blog description.
    Can I do it in the "Configure Header" window or must I edit the HTML template?
    Kindly check kenyantechguy.blogspot.com. You'll see one image in the header. I need several across that area.

    ReplyDelete
  46. Peter,

    You might want to look at the layout of THIS blog, as there is only about a 2" strip available for veiwing. The viewable part is in the center of the blog window with a 2 - 2 1/2" margin on the top and bottom.

    Good luck at unsnagging this!

    Roze

    ReplyDelete
  47. "THIS blog"

    Huh? Which blog? YOu have to give the blog ULL

    ReplyDelete
  48. Peter,

    First, thanks for the table... I knew nothing about HTML but I was able to put the pictures side by side (three hours later)....
    My problem is, I have these blue boxes next to all my pictures and I don't know how to make them go away.
    Any suggestions?

    http://dianakayfreer.blogspot.com/

    ReplyDelete
  49. thanks..its very useful..

    www.phycrewz.com

    ReplyDelete
  50. I did it and the table is all set but I do get a /> visible next to the image..what did I do wrong ?

    ReplyDelete
  51. Most likely it is due to a surplus or deficit of img tag or something similar. Check your image codes again to ensure they conform to <img src="" />

    ReplyDelete
  52. Hi Peter

    I've read many of your "helps" to blogger dummies.

    I wanted to place my image on blogger side by side and are able to click it. It will bring you to the original image size. (like zoom in)
    I had been figuring out the codes but failed.

    I realized that blogger couldn't do that with 2 images side by side. But if it is 1 image, it is clickable.


    Please help! Thanks in advance! :)

    Dumb Gal

    ReplyDelete
  53. Not so Dumb Gal, it can be done just as described in this post but substituting <img src="photo1 URL" width="180" /> with <a href="photo1 url"><img src="photo1 URL" width="180" /></a>

    ReplyDelete
  54. Hi Peter,

    Thank you VERY MUCH! I finally knew the coding for clickable pics.

    Have a nice day.

    Dumb Gal

    ReplyDelete
  55. One more tip. If you find hard coding the table code, try using Windows Live Writer

    ReplyDelete
  56. Thank you very Peter. This was really simple and helped greatly.

    Renaissance
    raghouseinternational.com

    ReplyDelete
  57. Greetings. I am back. I just wanted to post the link to my Press Room on my site. I used the html for the table you provided in this post and it turned out beautifully! Thank you so much for all of your help.

    http://raghouseinternational.blogspot.com/p/press.html

    This is very, very easy to do. I even made some of the photos a larger popup by replace the code provided just up above. So here it is. I worked on this all day and really like the way it came out.

    Renaissance M. Austin
    raghouseinternational.com

    ReplyDelete
  58. Thanks for the tips.

    itsjustcalledspicy.blogspot.com

    ReplyDelete
  59. hey. just asking, how to put that tiny little image beside your website/web address. I was really having a hard time searching for instructions but I can't barely find one. I remember, it showed up when I made my account but I just ignored it. PLEASE HELP ME! Thanks. :)

    ReplyDelete
  60. That is called a Favicon, short for favorite icon.

    ReplyDelete
  61. Really i appreciate the effort you made to share the knowledge.The topic here i found was really effective to the topic which i was researching for a long time
    digital image editing

    ReplyDelete
  62. thanks a lot...I used it even I dont know much HTML
    Thanks again

    ReplyDelete
  63. You have really imparted useful tips/ knowledge

    ReplyDelete
  64. how can i do this with links that go to a difrent web sight. here is an ex. what i want to do. http://ashleynewell.com/blog/2011/06/22/watch-me-wednesday-4th-of-july-invitation/ Scroll down to supplies, you see how she has her supplies like thum nails with a link under the photo. Can you please tell me how to do that.

    ReplyDelete
  65. This can be done by a combination of these HTML tags, table tag <table>, image tag <img> and hyperlink tag <a> and will involve quite a lot of HTML coding. I think the amount of coding can be reduced by using the Windows Live Writer table plugin. I think I will test out that possibility later when I have more free time and write a post about it. Keep in touch.

    ReplyDelete
    Replies
    1. ok thank you so much, I will keep checking in.

      Delete
  66. Hi there Peter. First off, I'd like to thank you for being so helpful to everyone over the years. Great blog. I followed your tip on putting images side-by-side and its worked great. However, not sure if you know why, but it seems the images are shrunk down quite badly when viewed on google chrome. I myself am a firefox user, but i wanted to show my blog to a friend and i noticed some of my icons are either shrunk down, or completely gone. All that is left is a clickable box.

    Here's a link so that you can see what I'm talking about.

    http://www.alfredsierra.com/p/about-me.html

    It's not a huuuge problem, but seeing as a lot of people have made the jump to Chrome, its kind of annoying.

    Thanks.

    ReplyDelete
  67. I too see the same thing in Chrome. I do not know the reason but it may help if you reveal more (the codes) about how the images are being displayed.

    ReplyDelete
    Replies
    1. Actually, I just figured out the problem. There was some messy code i had to clean out. It had something to do with the external links I embedded into each image. Cleaned it up, tried it again, and works like a charm. Now I have to go back and fix the rest of the blog. Thanks though. Keep up the good work sir.

      Delete
  68. Hi Alfred,

    Great to hear that you have solved the problem yourself. It would be even greater if you can share more about what caused the problem and how you cleared it up so that more can learn about it.

    ReplyDelete
  69. Awesome! Worked like a charm. Thank you.

    ReplyDelete
  70. So, how would you go about putting two buttons side by side?

    ReplyDelete
  71. If by button you mean a picture (of a button) which one can click to go somewhere else on the web, the codes will be the same as explained in this post but with the <img> tag surrounded by hyperlink tags such as in

    <a href="URL of target site"><img src="photo url /></a>

    ReplyDelete
  72. Oops missed out an inverted comma.

    should be src="photo url"

    ReplyDelete
  73. Hi peter, I just want to say thank you very much man. I dont know how long i've been searching for this. Cant believe i got help from a post that dates from 2006! Anyway, what if I want to put three images side-by-side? Do i put one more "td"?

    ReplyDelete
  74. For Consciousness,

    Yes, if you want 3 or more images side-by-side, all you have to do is to add corresponding more <td><td> pairs.

    ReplyDelete
  75. Hi, Can you continue down the page with additional side by side photos or does it require more code??

    ReplyDelete
  76. If you understand the <table> tag, you can extend this to any number of rows and columns. If not give me some time to test if there is an easier way to do this.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics