Thursday, March 18, 2010

Improving your blog - great photo resizing tip





Do you wish at times you could size a photo between L and XL?

I have great news for you. There is indeed a way. :)

A sweet blog friend Melissa, from Wishes, Dreams, Love, emailed me, alerting me to an amazing photo resizing tip found over at Clover Lane. I've since been using the tip to the extreme and am happy to report, it works awesome. So I'm now sharing it with you. :)

Now that proper credit is given, I'd like to give you my twist on this one.

~ Resizing photos in your blog post ~

1. Change to Updated Editor

(skip to #2 if you're already using this)

If you're working within the blogger platform to create your blog posts, I just want to alert you to the fact that there's now a Updated Editor version for posting. This is not a default setting if you've been blogging for awhile, so you need to go into your settings to tweak this. And I recommend you do this yesterday. It's that good.

Updated Editor, as opposed to Old Editor, is much improved for creating new posts. MUCH. One of my most favorite features ever is how photos now load and dock, waiting for further instruction from you. You can download many at a time, go do your dishes, then return later to start editing your post and resize the photos by simply clicking on S M L XL.

To check which editor you're in:


dashboard
posting
basic
scroll down to Global Settings
Select Post Editor - choose Updated Editor
Save Settings

2. Load a photo.

I'm going to assume here everyone knows how to load photos into their blog posts. So go ahead and download or copy/paste a photo to play with.

Once downloaded, click on the photo and a flyout menu will appear, allowing you to choose what size you want your photo to be. Select Large for this exercise so your numbers match mine.

Now, take note of the size vs. html number code for each size below.


small / 200


medium / 320


large / 400



between L and LX / 576


extra large / 640


XXL / 800

Blogger by default, will allow you to size a photo S M L XL.

I can help you size two extras,

* the one in between L and XL / 576 

* and the XXL / 800

3. Resize in html

1. Size your photo to large.

2. Switch to html.

3. Scroll down to the html for your picture so you see this below.



Note the underlined info and find yours. Your height and width configurations will likely be different than mine. They don't matter. The s400 tells you the picture size it currently is. And we want to change it to 576.

a) Remove      height="400" (yes, all that I typed, the whole thing, click and drag to select, then delete)

b) Remove      width="300"

c) change the s400 to s576



Like this.

4. Go back to compose and view your newly sized photo. :)

This works with all the sizes. Simply remove the height and width, and where it says s, pick and choose what number you wish and replace.

Here are those numbers again.

________________________________

small 200

medium 320

large 400

in between L and XL 576 (not a blogger standard)

XL 640

XXL 800 (not a blogger standard)

_________________________________

These are the only numbers I was able to make work. I tried all kinds in between. So know, I've done the hard work for you. You can now choose any of the sizes above to resize your photos!

Are your pictures cut off to the right?

If this is happening, the width of your posting space is too narrow for the picture you've chosen. Simply downsize your photo to accommodate your blog, or increase the size of your typing area in the html area. If you'd like to know how to do that, that's another whole lesson.

If widening/tweaking your blog, header and sidebars is something you'd like to learn as well, say the word!

Let me know if you have any questions. Now go experiment with all those cool photos you've been wishing you could change. :)

Wish for more blog improving tips? Click HERE for the works to date.

46 comments:

  1. thanks for doing the hard work for us!

    ReplyDelete
  2. How did I not know about the updated editor???? I guess it might help if I read the little blogger bits that show up on my dashboard, huh? Thanks for letting us know!

    ReplyDelete
  3. So great! Your such a smarty pants. :-) I cant wait to try this.

    ReplyDelete
  4. Every time I check out your blog I am either amazed (at your wealth of information) or awed (by your stunning projects)! And I also always wonder, "does Donna ever sleep?". Thanks for sharing yet another really helpful tip. I think there should be an award for you for being so totally unselfish. Hmmm. Perhaps I'll start an admiration society on my blog.

    ReplyDelete
  5. Thank you, thank you, thank you! Now we (aka those of us who never read those little updates on the dashboard...) will no longer have to live with mediocre photos! You really have no idea how much this is appreciated! Thank you for being willing to share this "little" tip and for making it easy to understand!! And I agree wholeheartedly with Coleen that it was totally unselfish and am always amazed at your blog!

    Once again thank you! You are truly an inspiration!!

    ReplyDelete
  6. It works! Thank you for great instructions and good visuals, underlining where the change has to be made! I am slowly going through all of your tutorials. Thank you, thank you!

    ReplyDelete
  7. Now that I've switched to the updated editor I guess I'll have to get back to posting on my blog! Thanks for the great tip!!

    ReplyDelete
  8. I would love to know how to increase the size of my typing area!!!!! Please do tell!

    ReplyDelete
  9. Windows Live Writer is what I use and it's SO easy to adjust your photo sizes. And you can have any size you want!!! Love it.

    ReplyDelete
  10. Thank you for this! Can't wait to sit down over the weekend and give it a try! Have a great day!
    Kristin

    ReplyDelete
  11. I'm looking forward to trying this... it took me forever to find the place to switch editor... I must have been using the ancient blogger tool... but I finally found, but now am too exhausted by my search to experiment...oh well. (:

    ReplyDelete
  12. Great information thanks and YES please give directions for changing the photos in the sidebar, as mine are cut off and I can't figure out how to fix them.

    ReplyDelete
  13. Thank for the tip! I put your sizes on a post it to try!

    ReplyDelete
  14. Great info!!

    thanks

    have a super Friday

    blessings

    barbara jean

    ReplyDelete
  15. Donna, your tips have improved my blog a hundred percent already and now here's another one to try out this weekend. Thanks!

    ReplyDelete
  16. Thanks for the great info. I have a question. Will the photos still maintain proper proportion each time since we'll be using a size not originally offered by google? Have you ever noticed any distortion?

    I'd love to see a tutorial on how to change a blog from a 3 column to a 2 column. Do you know if anyone has one somewhere? (You know I think you have the answer to everything! lol)

    Thanks.

    ReplyDelete
  17. Thanks! I'm going to try this.

    Donna

    ReplyDelete
  18. #18 Polly,

    Do the photos stay proportioned? YES. Amazingly yes!!

    But remember to remove the height and width first. And bear in mind, this will not work if you don't use those exact numbers specified. Why, I have no idea.

    I've also addressed the 3 column to 2 column. This is way out of my own personal comfort zone as the wrong html hack can shut down a blog real quick like. I wouldn't even feel comfortable suggesting this one if I had the answers. I suggest to hire a pro to do it OR, google for the answer first (my computer brought nothing up), and try it on a practice blog first.

    Before changing major html settings on any blog, it is recommended to backup your original template of your blog so if something went wrong or you'd like the original template back, you could have it at any time. Perhaps check with your blog designer to see if they did this if you didn't.

    #14 Julie, got it! That's abit of a different tutorial all together but it's of value, so duley noted!

    FJ Donna

    ReplyDelete
  19. Thanks SOOOOOOOOO much for explaining how to change the editor! I have 2 blogs, one is old and the other is new and I couldn't figure out for the life of me how to make posting on the old one as easy as the new one. You're a ROCK STAR!!!

    ReplyDelete
  20. Great tip. But I use Livewrite to write and edit my post. That way I can not only easily upload and enhance my pictures but I can set the exact pixel size I want them to be.
    Just another suggestion.

    ReplyDelete
  21. A couple have pointed out using Windows Live Writer instead.

    I have used it as well in the earlier days. I found at the time (I believe this has changed) that if you made the post in Live Writer, you HAD to re-edit it in that same program too. I didn't like the extra clicks to do so.

    Not to mention, I could NEVER get my little picture icon to show up in the blogrolls.

    For those two reasons alone, I decided to drop Live Writer. But to be fair, I'll reinstall and do a review on it as well one day so this info can be fairly updated.

    I remember Live Writer being a breeze to use in comparision to Old Editor within blogger, but with the New Editor, I've found no reason to go back. Yet. :) Stay tuned!

    FJ Donna

    ReplyDelete
  22. DONNA SAID:

    increase the size of your typing area in the html area. If you'd like to know how to do that, that's another whole lesson.

    If widening/tweaking your blog, header and sidebars is something you'd like to learn as well, say the word!

    PAT IS PLEADING:
    please, yes , oh please -- HELP WITH THIS INFORMATION.

    I played around with my blog and changed the editor and posted a picture. But I must need to change my WIDTH and TWEAK my blog!

    You truly are the greatest blog mentor a gal could have! =)

    ReplyDelete
  23. Thanks for the info. I recently did a resizing post myself for my little side party buttons. (Sometimes I'm lazy and don't get everything uniform immediately, but eventually it bugs me enough that I fix it--it's the difference in loading a pic to the sidebar vs. the html code. The html codes are better of course.)

    ReplyDelete
  24. You lost me at html, such scary letters. But I did everything else.

    Thanks for your helpful blog hints.

    ReplyDelete
  25. Love it. thanks for giving us the info..

    ReplyDelete
  26. Thanks so much from a new blogger. Now I have a question; how do I get the really small thumbnail pictures? My blog is starting to get filled up with the larger links and I like the picture better than just the name of the blog. Any help would be appreciated. Alaina

    ReplyDelete
  27. Thanks for the tip! I would LOVE to learn how to make my blog wider. It drives me nuts that it is so narrow.

    ReplyDelete
  28. Donna--HELP! I just tried this for the post I linked to SNS. 576 was too big, but when I did a smaller number (say 450) and went back to compose, it didn't show my picture, just a small square with a camera in it. I didn't try and publish the post like this for fear of losing my picture (which I guess is not a big deal, I could reload it), But was wondering if you had any hints.
    Thanks so much
    Becky

    ReplyDelete
  29. Great tips...thanks!!
    Hugs
    SueAnn

    ReplyDelete
  30. Cool! I will definitely be trying this! Thanks for the tip.

    ReplyDelete
  31. Thank you, thank you, thank you!! I did not even have the updated editor, so I really appreciate the time you took to share these helpful tips. As a newbie blogger, I appreciate any and all tips to help present our projects as beautifully as possible. I'm a new follower!
    Nicole :)

    ReplyDelete
  32. I'd love to know how to edit pics in side bars and writing space larger. Thank you for this lesson. There is a tut on how to change from 2 column to 3 column, very easy and step by step with pics, I did it and it worked, I'm searching to try and remember where I got it and will email it to you.

    ReplyDelete
  33. This is exactly why I hang around smart people! Thanks so much for the info.

    ReplyDelete
  34. I just wanted to let you know that I tried it and it worked and gave you credit and linked back to your tut, thanks so much for sharing it.

    http://texasmonkey.blogspot.com/2010/03/so-easy-peasy-wall-art.html

    ReplyDelete
  35. Maybe I am doing something wrong... but I am finding the new one hard to move the photos around. I have one on top of another and they aren't easily dragging around to above or below another. And I can't get the top one to move lower so I can add my typing. I am trying to go above it and press enter... but it isn't moving. I think I will have to play with it more to see if I like it! But thanks for the new information! :)

    ~Jennifer

    ReplyDelete
  36. please, please, please tell me how to get more space to post. I have a layout from hotbliggityblog.com, and it works for now BUT I wish I could use bigger photos. There is an entire space on the left that is USELESS. I'd love to increase the posting area, oh wise one!

    ReplyDelete
  37. I switched to the new editor and I found it hard. :( I don't know why. I felt like it wouldn't drag my pictures and I was just having a hard time with it. Maybe I'll try it again later. I just ended up switching back to the old editor. Kelly

    ReplyDelete
  38. Donna, Thanks so much for this information!!! Very easy directions to follow!

    Tammy

    ReplyDelete
  39. Love the information, but I'm definitely curious as to widening my blog without losing the cute background and messing up my header. This was emailed to me by someone else, so if you've already explained that and I've missed it, I'm so sorry. If you haven't, could you let me know if this is an easy thing to fix?

    Blessings,
    Sasha

    ReplyDelete
  40. Hi Donna,
    I just read a bunch of your posts. I've been blogging for a few months, but he tech stuff just kills me. I have yet to figure out how to do my header the way I'd like, so if you do a post like that, I'd love to read it. I was wondering if photos can be resized, know I know.

    Thanks for all your help.

    -Gina-

    ReplyDelete
  41. Excellent tutorial...I put it to good use immediately!

    ReplyDelete
  42. Thanks for the great tips ~ I am headed to the updated editor right now!

    Love,
    Susan and Bentley
    xxoo

    ReplyDelete
  43. I am working my way thorugh this series on blog tips (as well as following your current series) These tips are an amazing help! I now know how to resize a photo! Thanks!

    ReplyDelete

I love your comments and read every one of these! For more interactive feedback from me, I'd love it if you'd join my FJI Facebook page where communication is always current and incredibly fun! Thank-you!