Wednesday, July 18, 2012

Blogger Template: How to make portrait and landscape photos the same width



Giulia, from Fishly News, asked me about the code I used to line up the margins of my portrait and landscape photos.  Have you ever noticed? Scroll up, scroll down, then come back!

You see?

It's a simple fix.  You bet I didn't come up with it! I used the instructions from Girl does Geek.

After applying this code, all the photos on your blog will be resized automatically.  Beware: older photos may now appear blurry.  To fix this, edit each post and adjust the portrait photos to 'original size'.  I have adjusted many of my archived posts, but not all of them.

You also need to work with fairly large resolution photos. The original size of each image needs to be large enough that blogger doesn't stretch them.  

Does this all make sense?  Feel free to leave questions in the comments!

ps. it doesn't work in google reader...just on the blog site.

UPDATE: That link has expired or been removed...I will try to find the directions again!

16 comments:

  1. Giulia@fishlynews.comJuly 18, 2012 at 8:48 PM

    Thanks so much!

    ReplyDelete
  2. :)

    I hope it works for you!

    ReplyDelete
  3. This is perfect!! Thanks for sharing this tip :) This is going to be very, very handy. Wooooot!

    Love the photos you edited for the nursery reveal on designwali...looks fab! Would you be able to share some guidelines on how you edit the photos? I've been trying to get better at editing pics.

    ReplyDelete
  4. In January I did this too and, yup, older posts got a wee bit blurry. Sigh. Wish I'd thought of this before then. I've gone back and changed some of mine, but not all.

    ReplyDelete
  5. good to know! I'm trying to line up my text width to be the same as pictures as well.

    ReplyDelete
  6. Awesome! I'll be trying this out most definitely!

    ReplyDelete
  7. oops. I missed the whole Blogger thing. Need to figure it out for Wordpress.

    ReplyDelete
  8. It worked! Thanks so much! Even my CSS guys at work didn't know a simple solution - sometimes the experts get to complicated so I'm glad you found Girl goes Geek ;)

    ReplyDelete
  9. Thanks for the tip Shannon!!! I'd love to see more of these...I'm totally green and flying by the seat of my pants with this whole blogger thing. Sometimes I wish I could take a crash course and really learn the ins and outs!

    ReplyDelete
  10. Shannon- That is so awesome!! Thanks so much for posting! xox

    ReplyDelete
  11. thanks so much Shannon, that has been bugging me for ages!
    Fiona x

    ReplyDelete
  12. Thank you SO much

    ReplyDelete
  13. hi can you write the code for this because the link isnt working?

    ReplyDelete
  14. your link to girldoesgeek isn't working. what is the code?

    ReplyDelete
  15. any ideas on how to do this for videos as well. this worked great for images. thanks!

    ReplyDelete
  16. I tried to look up the blog but it will not go through. I already have it on my blog but soon I'm going to reconstruct my entire page. I hope I find the code in time!

    I’m having a giveaway on my blog if you’d like to join. Giving away 2 YSL items :)

    Xx,
    http://www.sacosha.blogspot.com

    ReplyDelete