Saturday, December 6, 2008

A New Goal, and Combating Blogger's Image Auto Resize


To improve my picture taking skills. I've made a new goal to try and post at least one picture a day. Here are a few from today.

I'm also attempting some restructuring of my blog. I want to be able to show larger photos. Once again, blogger was being a little difficult. It auto resizes your photos for you. To get around it, I had to first modify the html of my layout to create larger body margins (you'll notice that my page Title is now stretched). Then I edited the images within my post. It actually turned out to be pretty simple...


  1. Click on the "Edit Html" Tab when you are editing a post.
  2. Now scroll down and you can see the Html code for your images. It will look pretty messy.
  3. Search through the code and delete width: 400px; height: 268px;
    Make sure not to delete anything else. Accidentally deleting the quotation mark after the 268px; will cause your image not to load on the page.

    (the following is code for one image)

    < a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_XkZlO1d4oa4/STourq8-vrI/AAAAAAAAHaM/yedhORxAlHg/s1600-h/DSC_4499.JPG" > < img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer;cursor:hand;width: 400px; height: 268px;" src="http://1.bp.blogspot.com/_XkZlO1d4oa4/STourq8-vrI/AAAAAAAAHaM/yedhORxAlHg/s400/DSC_4499.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5276581241217269426" / > < /a >

  4. Next you need to change what image blogger will load. If you currently have blogger loading "large" size images, the image folder will be s400. Change this number to s1600. (you will notice a "s1600-h", this is the image that loads when you click on the picture in your blog.)

    < a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_XkZlO1d4oa4/STourq8-vrI/AAAAAAAAHaM/yedhORxAlHg/s1600-h/DSC_4499.JPG" > < img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer;cursor:hand;" src="http://1.bp.blogspot.com/_XkZlO1d4oa4/STourq8-vrI/AAAAAAAAHaM/yedhORxAlHg/s400/DSC_4499.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5276581241217269426" / > < /a >

    Changing this number to 1600 doesn't mean your image will be 1600 px... it will simply use whatever size you uploaded to blogger. I usually resize my photos to 800 px when I upload them. That is the size you will see on my blog from now on.

  5. Now you're ready to post your blog.

I plan to try this semi-new look for awhile... we'll see how it goes.








2 comments:

Cristina Kalpa said...

Very nice :). Is that makeup in the first one?

ryan said...

you got it. the girl i was shopping with wanted to check out the makeup section... so while one of the makeup ladies (what exactly is their job called?) was putting some stuff on my friend's eyes, i took a few pictures.