Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, November 21, 2010

Resize Blogger Post Image

I have been wanting to write a post on this for quite some time now. I have written a tutorial on how you can control the target size of an image when you click on it. This tutorial uses the same idea. When you upload an image to Blogger, you can resize them by clicking on the image once. But you are only allowed to choose between Small, Medium, Large, Extra Large and Original sizes. What if you want a custom size that is not defined by any of these selectable sizes? Sometimes, you have to make your post images really small to line up few images in a line.

You can easily adjust the size of your image to fit whatever size that you want it to be. See this image for example. I have adjusted the size of this image to fit the width of my main posting area, with some room to breathe at either sides of the image.


Go ahead and upload the image that you want to your Post Editor using Compose Mode. Then, click on Edit HTML to view the HTML counterpart of your image. This is the code for the image that I have uploaded above:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_VZprIDHV4-Q/TOkdXQZuBcI/AAAAAAAACGU/AiCtW-CS_d4/s1600/P1070217.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="240" src="http://1.bp.blogspot.com/_VZprIDHV4-Q/TOkdXQZuBcI/AAAAAAAACGU/AiCtW-CS_d4/s320/P1070217.JPG" width="320" />
</a></div>

You have to make two changes to the original HTML code that you have.

1. Delete the 'height' and 'width' attributes in Line 3.

2. Change the number before your filename in Line 3. This number will usually be either s200, s320, s400, s640, s1600 or some other letters associated with a number, depending to the size of your original image. You have to change this number to the value of your preferred width.

After deleting the height and width attributes, and changing the width (from 320px to 516px), this is what I have:
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_VZprIDHV4-Q/TOkdXQZuBcI/AAAAAAAACGU/AiCtW-CS_d4/s1600/P1070217.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="http://1.bp.blogspot.com/_VZprIDHV4-Q/TOkdXQZuBcI/AAAAAAAACGU/AiCtW-CS_d4/s516/P1070217.JPG" />
</a></div>

To make things simpler, see the 3 highlighted parts below. All you have to do is change this:

<img border="0" height="240" src="http://1.bp.blogspot.com/_VZprIDHV4-Q/TOkdXQZuBcI/AAAAAAAACGU/AiCtW-CS_d4/s320/P1070217.JPG" width="320" />

to this:

<img border="0" src="http://1.bp.blogspot.com/_VZprIDHV4-Q/TOkdXQZuBcI/AAAAAAAACGU/AiCtW-CS_d4/s516/P1070217.JPG" />

Have fun.

17 comments:

  1. Hey, me again ;). In my sites "Affiliates" page, we are doing the same thing along with the gallery thumbnail tutorial you have. Though the problem for me was that I couldn't change the size (ex. s200) without the image no longer being available. There was not a "height" to delete, either (we got the img urls from another site. They're what we call site buttons and it links directly to their site)

    Anyway, I'm adding a style="width: 125px; height: 125px;" after the src. It did change the image size then. I don't know if that's okay, or not the recommended action, but it was the only way to change the size without using the blogger default. You may want to look into, at and/or mention that.

    Thanks again, Yoboy. I'm onto commenting about the next tutorial of adding a skeleton for that thumbnail gallery. =) I got a question for that one.

    ReplyDelete
  2. RaindropSoup: This is how it works. When you upload an image (say a really huge image) to blogger, it will limit its maximum pixel to be 1600px at any one side. And the good news is we can choose any value lesser or equal to 1600px to be displayed on our post. If this image is not hosted at Blogger (technically Picasa Web Album) or if it is small, we cant really choose a size to display it. That is why you couldnt change (a better word would be 'choose') the size of your image.

    When you apply 'width' CSS attribute to your image, you're merely forcing it to stretch to display at a size that you want, as opposed to 'choosing' a size if you uploaded a large image on your own and change the s320 part. So this is a case of changing vs choosing. That's the difference. If your image doesnt pixelate after you apply the 'width' attribute, then all is well, there's nothing to worry at all. Hope this helped.

    ReplyDelete
  3. Thanks for clearing that up for me!

    ReplyDelete
  4. Thank you for your help. I look forward to utilizing your information and appreciate your efforts in helping to solve this agonizing problem.

    ReplyDelete
  5. Gayle: No problem at all. Thanks for stopping by.

    ReplyDelete
  6. fantastic post.its nice tutorial post.

    ReplyDelete
  7. Glad you like it. If you have a particular tweak in my mind you can request for a tutorial here.

    I'm running out of things to write tutorials on :P

    ReplyDelete
  8. I used your tutorial and successfully customized the size of my images in my blog posts. However...when using Internet Explorer (Chroma and Safari are ok) the photos don't show up in the posts. Any thoughts on this?

    ReplyDelete
  9. @Perryn: IE is not showing your image because of something else altogether. Please get in touch with me through this link so that I can help you further with your issue. Cheers.

    ReplyDelete
  10. Hi YoboY

    Great tutorial!
    I'm using it with my new post tonight :)

    ReplyDelete
  11. @Winnie: Bigger cake pictures = win.

    ReplyDelete
  12. Thanks :)
    You can see now my new post - the first 2 photos are larger thanks to you :)
    http://winnish.blogspot.com/2011/10/blog-post_04.html

    ReplyDelete
  13. @Winnie. You're welcome. Looking goood.

    Cheers and God bless.

    ReplyDelete
  14. Nice post! How can I make all post images to original size?

    My site: http://www.galaxylol.com/

    ReplyDelete
    Replies
    1. If you want to retain your image's quality, you're gonna have to resize them manually, one by one. Click on the image once, and choose 'Original'..

      Good luck :)

      Delete
  15. Hi, Are you still doing this blog? I see no comments since 2011. Is it any easier now? My options does not show any 'Edit HTML' option :(

    ReplyDelete
    Replies
    1. Not much posts, since there hasn't been anything new on Blogger lately (except for minor changes here and there). But I do reply to emails and comments. I believe I have replied to you in the forum :)

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.