I finally got around to signing up for Amazon’s S3 services, and let me say that I am impressed. It is fast, (seems) reliable, and very affordable for a modest blog like mine. I just moved some of my recent blog post images over to the S3 servers just to test it out. I am very pleased and from here on out, all new images will be hosted there. I immediately thought about how I wanted to handle uploading and linking the image to the post. My first thought was Transmit 4 since it supports S3, but in the end I decided that I would need an option that was a bit more automated. Here is what I came up with:

My workflow:

• Rename an image on the desktop (Hazel takes over)
• Paste preconfigured IMG tag (with source, title, height, and width filled out) from clipboard in to article

To pull this off, I needed a couple of things:

• s3cmd
• Imagemagick
• Hazel
• And a little bit of shell scripting

So the first thing I had to do was to get s3cmd installed and working, which is the command-line tool that connects to your S3 account. This was easy enough, their website has all the instructions posted right on the homepage. After it installed and ran the –CONFIGURE process, I fired up the terminal and tested it out. It works pretty slick.

Now that I have scriptable access to S3, I am ready to work on a Hazel rule to upload the photos. I decided to run this rule on certain images right on my desktop since 90% of the images I post are screenshots of things I’m trying to visually explain and screenshots automatically go to my desktop. I added a new rule and gave it a descriptive name: “Image upload to S3 and copy IMG to clipboard”

I only have one condition for this rule to determine whether or not the image should be uploaded to S3 – If the FILENAME starts with “BLOG_” then run these two scripts, move it to the trash, and notify me when you are done. I also created a TextExpander snippet for adding “BLOG_” which I have abbreviated as “.bl”.

Ok, now for the good stuff. The first script, like my previous post, simply strips out the spaces in the filename because shell scripts get cranky when spaces are involved. I also had to separate it from the main script, it seems to work more consistently that way. Here is the code to that first Shell script:

The second script is where all the heavy lifting is performed. I start by declaring some variables. You will have to add in the name of your S3 bucket under the DIR and ROOT variables. I also declared a BLOGWIDTH variable. This is the width of the column that my articles are displayed in on this website, which happens to be 640px wide. You would obviously change that to the width of your own blog posts. But why is this important? When I was deciding how I wanted to implement this script I came across the issue of photos too large for the blog, not displaying properly. I originally resized them down before uploading, but that was not acceptable for large images where I wanted the user to be able to click on it to see the full-size version. My solution was to upload the full-size image and then use the command-line tool, Imagemagick to read the dimensions of the photo. With a little bit of math, the script now figures out the proportionally scaled down height and width values and puts them in to the IMG tag that it creates in the clipboard. If the image is less than 640px, it skips that process and just uploads the photo and creates the preconfigured IMG tag. This results in perfectly sized photos on the blog, and if the user clicks on them, they are linked to the full-sized versions on the S3 server.

So that is pretty much it. My workflow consists of renaming an image on my desktop and when I see the growl notification saying that it has been uploaded (which is basically instantaneously) I hit CTRL+V in my TextMate blog post or god forbid the WordPress backend, and it will paste a perfect IMG tag with the correct source, width, height, and title (pulled from filename), all wrapped in an A HREF link back to the original. Its awesome. I should also mention my IMG tag has some WordPress specific class information you may need to strip out if your blog is not on WordPress. I know this probably sounds like overkill for images, since there are a million other ways to do it, but this works well for me. It is so simple that I don’t even think about it, I just do it, and that is the very definition of a productive workflow.

Enjoy!