Thursday, March 19, 2009

How to insert an image into a blog post without uploading.

This post is for Ashley MacKay who buzzed me this question over Gmail today:

I am working on customizing a blog (http://ashleymackaydesign.blogspot.com/) and I would like the pictures I upload to be the same width as the column where I post like http://thesartorialist.blogspot.com/ or http://jessicahische.blogspot.com/.

I have tried making the images the size I want them to be in photoshop, uploading them, then editing the html to make them the right size, but it just makes them fuzzy. I have tried making them really big and hi res and they end up fuzzy. And I can't believe that these other blogs actually have to edit the html every time they make a post. I hate blogger for not letting me just choose how wide I want my pictures. Do you have any idea about how to fix that? If you've never even thought about it don't worry about trying to figure it out. I just thought I'd ask.

Thanks!

Ashley Mackay
I'm going to approach this like a recipe so, ingredients first:

1 Blogger Blog
1 Image you want to keep it's aspect ratio
1 Picasa account (you have one if you have a blogger blog)
(ps. you don't need a picasa account if you have your own server where you store images)


Instructions:

First you have an image on your computer that you've sized how you want. You need to get it onto the web, and blogger's upload thing resizes your image for you, so you need to use some other method. Here I suggest picasaweb.google.com which you already have if you are a Blogger blogger.

Go to Picasa and click on the "Upload" button on the top (see image)


Then create a new album



I called my Blog Album


Once you create the album, you can then upload any images that you want to use in your blog. Uploading this way, whatever size the image was on your computer is the size it will be in your blog. (Be sure that you crop or edit it before uploading it).



Once you upload, you will be brought to the image you just uploaded. You need to get the image's location. This is a bit tricky. Right click on the image and select "Copy Image Location" from firefox.


If you are using Internet Explorer, it is a little trickier. You have to right click, then go to "Properties." Once in the Properties menu, highlight the "Address:(URL)" and copy it.

GET YOUR IMAGE INTO YOUR BLOG

Now go to your blog post. Click on the Edit HTML tab in the edit window:



Now go to the place in your post that you want to put your image. Insert this text:

<img src="copied_URL" />

This will include the image whatever size it was.

IMAGE WITH BLOGGER:


LINKED IMAGE:


Sam Lambson

Sam Lambson Photo

Profile

I will get along with you. You cannot resist my charm. Welcome to Sam Lambson . com where you will be sure to find everything you would want to stalk me. Let's be serious though -- here's my resume.