Sunday, 11 March 2012

Blog Tips: Pictures Side by Side and Adjusting Picture Size

   Once again, a very simple problem people have. Like I said in the previous post about linking images, this one may also come down to preference. Perhaps some people want to put the images side by side on MS Paint and upload them as a single image, even though it has the same effect as what I'm about to show you. Others like to take lots of images and rotate them a few degrees and arrange them or overlap them to create some sort of mood board. These can look quite cool, and, understandably, individual images can't be linked this way, and so links are posted beneath them.

   But for those of you who want to be able to arrange your pictures in an easier-to-view format, I recommend the following few steps. I will say now, though, that if you intend to make these images links as well as put them side by side, make sure you turn them into links first, unless you want to edit the HTML for that instead.

   First of all, upload the images you want to use using blogger's image uploader. Don't mess around with the "left; right; center" buttons. These have nothing to do with it. I always set mine to centre, so I keep it selected to that as default. I upload all the images I want, and then I switch to the "Edit HTML" tab instead of the "Compose" tab. There are two different HTML layouts pictures take, and I've had both so far. So I'll show you how to do it for each. First of all, the most basic and common HTML on blogger for uploaded images. In the image below I've highlighted in blue the end of the HTML for the first image, and the beginning of the HTML for the second.




   I wanted them side by side, so I selected the close div of the first image and the open div of the second and deleted the lines. This then put the </a> of the first image and the <a of the second image next to eachother, and if they're not, make them so. The below image shows highlighted the single space that separates the two images. This is not necessary, but because in this case I'm having two rows of two images, I've put the space there because there is an equal space between the two lines. It just seems neater.




   Press "preview" and make sure you're happy that they line up well. Sometimes I've found that two images I'm using don't match in height enough and I end up removing the images and rearranging them. If you're happy, move on and do the same for the rest.
   The image below shows the first highlight as the end of the first image and the beginning of the second. The second highlight, the close and open div line, shows the end of the second image and the beginning of the third. As you can see, I've deleted the empty line that was between the </div> and <div and have them directly above and below eachother. The highlighted line in the below image marks that the images will now begin on a second line. Don't delete this highlighted line, if you want the pictures on another row though, or it won't work.




   Now, another HTML layout is a little longer, but the results are the same. The only reason I'm bringing it up is because there's a smal factor that is in this uncommon one which can play about with spacing and put the lines further apart. If you find "1 em" with or without spaces in your image HTML, and it is affecting the spacing between the lines and images, change the 1 to 0 so that it says "0 em". This should correct the problem.
   Below is a preview you're probably all familiar with that shows the end result of this minor tweaking:




   This is the method I use to arrange my Etsy Favourite Features. This is just my personal preference, but the only tutorials I could find about positioning images next to one another suggested using a table or graph, which created unwanted blocky lines that I couldn't get rid of. This is a much simpler and effective method, and enables me to make each image an individual link to its individual Etsy listings.


EDIT: Adjusting Blogger Picture Sizes

   You may well find that not all of your pictures are the same size. Rather than using the 'small' 'medium' 'large' options that appear when you click onto the picture, you can return to the HTML and target the 'width' and 'height' coding which comes just before what has been added above. Height may not be present in all codes, and if height is, width may not be. In this case, if you want to adjust the height and it only offers width, just replace 'width' with 'height' and change the number to 250 - just to get you started. 
   Choose just one factor to adjust - either height or width - and delete the other. The reason for this is that if I start to adjust the height but don't adjust the width, the picture will stretch upwards. If, however, only height is shown (whether because 'width' was never there to begin with or because you deleted it), then by adjusting the height, the width will automatically scale with it. The same goes if you work only in 'width' and remove 'height'.
   I usually only adjust the height setting because I find it's the more commonly present factor in the coding, but if you prefer to adjust the width instead, you can change 'height' to 'width' and put in a number as I said in the first paragraph.
   I use a lot of images from Etsy, and not all of them are the same shape and size, and it can be a bit unsightly. However, by deleting 'width' and adjusting only the 'height' of the shorter image, I can match them. The simple way to do this is to look at the numbers provided under 'height' and 'width' of the picture you're trying to match the size of. Whatever the height option is of that image, I copy to the smaller image. If only width is available, I work that way instead, or change 'width' to 'height'.
   It may turn out then that you've made both pictures a little too big to be on the same line together even if you adjusted to coding shown above to put them side by side. In this case, just decrease the number for both images until they fit. You may be decreasing by 10s, or you may be decreasing by 1s. It depends on the finished size you want.

   I hope this is of use to someone!



31 comments:

  1. This is brilliant and by far the best explanation I have found - it worked first time! Thankyou a million AFJ xx

    ReplyDelete
  2. Thank you! This was the best explanation I have found, and I've been searching all day for one.

    ReplyDelete
  3. Can't thank you enough. My blog was looking like crap because of the photos. Now it's looking MUCH better! And I don't know a thing about HTML.

    ReplyDelete
  4. Great tutorial! It's a life saver =D Thank you Kim!

    ReplyDelete
  5. Thank you so much! Finally a tutorial that is written for html illiterate people like me!

    ReplyDelete
    Replies
    1. I, too, was HTML illiterate at the time :P I'm not a pro now or anything but I've picked a couple of things up through trial and error. I'm so glad this little post is so helpful to so many people :D hooray!

      Delete
  6. Thank you so much found this so helpful, HTML confuses me but this post is really simple to follow and now I can move my images around:D

    ReplyDelete
    Replies
    1. I'm so glad! Once you can identify the image HTML you can do a lot with it. I'm glad to be of help.

      Delete
  7. Please help me! Nothing is happening, both pictures stay the same way. This is getting very annoying now, as I have already put two pictures side by side in "Compose" by fluke, and these other two pictures are not aligning so!

    ReplyDelete
    Replies
    1. What size pictures are you working with? If you're setting the pictures to 'large' or 'x-large' then it probably won't work if your blog isn't wide enough. Looking at the size of your blog, I don't think anything bigger than medium will go side by side.

      If it's a fluke in 'compose' then odds are that you can't repeat it. You'll need to rely on HTML.
      First of all, both images need to be set to 'center'. Click the images and select the 'center' option, and make sure they're no bigger than 'medium' - if you want three pictures side by side, you'll need them to be small.
      Then switch to the HTML window of your post and remove the text highlighted in the first image. Make sure, then, that the /a of the first picture and the a of the second are now beside eachother, and leave a space between the two as shown in the second image, unless you want them to be right against eachother.
      If you've used medium images, they should work fine on your blog once the post is posted, or the post is in 'preview', but while you're still composing, the pictures may still appear one above the other. To see if it's worked, you'll need to preview it.

      Delete
  8. Thanks for a very helpful tutorial! I was starting to think that showing images side by side without first uploading them to a photo storage site was impossible. The spacing of your social buttons looks great, and I'm coming up with excess space between mine when I follow the steps above... Any ideas on getting rid of that space?

    ReplyDelete
    Replies
    1. With my social buttons, I just don't add a space between the closed a href and the open one of the next image. So in the second image, that shows a highlighted space between the a's, just don't add that space ^^ Easy peasy.

      Delete
  9. THANK YOU SO MUCH! This is the most simple tutorial I've been able to find. It worked perfectly. Thanks!

    ReplyDelete
  10. It worked perfectly!!~~ Thankies

    ReplyDelete
  11. I did this step by step and it really isn't working, nothing I do get the images right next to each other, it is so frustrating! I'm not completely inept when it comes to HTML so I really can't understand how it isn't working, is there any other way you could perhaps help? I would really appreciate it!

    ReplyDelete
    Replies
    1. If you're following the steps perfectly then there's no reason it shouldn't work, unless you're trying to fit images that are too large to fit next to one another. If your blog width (with the post margin in mind, too) is set smaller than the size of the two images side by side then it won't work, and if you haven't removed the "1em" from each HTML set it could make a difference. Also, if you're trying to add a link to each image, make sure you do this step before moving them side by side.
      This won't work at all if you're trying to add captions to your images, it complicates the HTML and other steps have to be taken that I haven't figured out yet.

      Delete
  12. Thanks Kim! This was definitely useful for me.

    ReplyDelete
  13. Thanks so much for this tutorial! Just wonderful!

    ReplyDelete
  14. I needed this sooo bad. You`ve explained it in a simple way. Thanks so much!

    ReplyDelete
  15. Thank you so much! So many other tutorials are very complicated, and this helped in a majjjorrrr way!
    THANKS!
    www.boldlybroadcasted.com

    ReplyDelete
  16. thank you thank you thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

    ReplyDelete
    Replies
    1. Hehe, no problem at all! It's a dead simple solution, but one I could find nowhere myself! Plus it's a pretty good place to start when it comes to learning how to adjust basic HTML and give you more control over the layout of your blog!

      Delete
  17. I was able to configure the alignment by adjusting the width of one and the height of the other. Well pleased with the results. Thank you very much!

    ReplyDelete
  18. Thank you so much! Very useful and helped me loads!

    ReplyDelete
  19. Thanks! The best explanation I have found, you're great! I am setting up my blog, I hope to find more great explanations on your site. check www.studioimara.blogspot.nl

    ReplyDelete
  20. Thanks for solution but one problem is that How I give caption to Side by Side picture

    ReplyDelete

I do read every single comment, and I will try to respond where I can. If you have an important question about my blog or my shop, however, then you might be better off contacting me directly by email. Thanks so much for reading my blog!