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!
Posted by at

16 comments:

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

    Thanks so much!

    ReplyDelete
  2. Shannon8foot6July 18, 2012 at 8:58 PM

    :)

    I hope it works for you!

    ReplyDelete
  3. how2homeJuly 19, 2012 at 10:25 AM

    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. Tanya @ dans-le-townhouse.blogJuly 19, 2012 at 10:36 AM

    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. MindyJuly 19, 2012 at 11:11 AM

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

    ReplyDelete
  6. Jordana @ White CabanaJuly 19, 2012 at 11:28 AM

    Awesome! I'll be trying this out most definitely!

    ReplyDelete
  7. Jordana @ White CabanaJuly 19, 2012 at 12:11 PM

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

    ReplyDelete
  8. Giulia@fishlynews.comJuly 19, 2012 at 3:32 PM

    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. amy walters, aDESIGNdockJuly 23, 2012 at 9:19 AM

    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. CollinsalauraJuly 23, 2012 at 12:30 PM

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

    ReplyDelete
  11. LilyfieldlifeSeptember 5, 2012 at 5:13 AM

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

    ReplyDelete
  12. Moon LinaFebruary 15, 2013 at 5:40 PM

    Thank you SO much

    ReplyDelete
  13. JulieApril 19, 2013 at 4:21 PM

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

    ReplyDelete
  14. katieAugust 31, 2013 at 6:18 PM

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

    ReplyDelete
  15. odysseyOctober 8, 2013 at 1:16 PM

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

    ReplyDelete
  16. BeatriceBalajJanuary 17, 2014 at 12:42 AM

    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

Subscribe to: Post Comments (Atom)