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.

Facebook Pinterest Twitter Google+ RSS

Categories: Blogging Tips
46

Post a comment!

Your email address will not be published. Required fields are marked *

  1. 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.

  2. 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!!

  3. 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!

  4. 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. (:

  5. 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.

  6. #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

  7. 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!!!

  8. 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.

  9. 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

  10. 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! =)

  11. 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.)

  12. 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

  13. 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

  14. 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 🙂

  15. 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.

  16. 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

  17. 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!

  18. 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

  19. 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

  20. 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-