Blog Productivity: Edit, Upload & Post a Pic in 60 Sec

I love my Macbook. I don’t know how I got along without it. It’s well designed, beautiful (at least as far as computers go), and best of all it allows me to be unbelievably productive. That’s a good thing too because when harvest hits high gear next fall free time will be in very short supply. I wouldn’t want my pinot blogging to suffer. ;)

To prevent just such a catastrophe, I’ve mixed together a bunch of killer Mac tools into an unholy brew that allows me to take an image, manipulate it, upload it to my web server, and code it into a blog post in under 60 seconds. This is a big deal to me as this same process used to take closer to 10 minutes. If my estimates are right and I blog about 4 times a week on average where I use a picture, it turns out I’m saving 31.2 hours per year. That’s nearly a work week’s worth of productive hours saved!

Anyway, I’m so thrilled I just had to share (figured I’d waste a few of my newly saved hours to write this post). Check out the video after the jump to see it all in action, and if you’re still around at the end, I’ll show you how to set it up for yourself.

Warning!

This post is EXTREMELY geeky. If you’re looking for a wine post, come back tomorrow. If, however, you’re like me and want to squeeze every last ounce of productivity out of the time you spend blogging you really should have a look. All set? Click “more” below to jump feet first into blog productivity nirvana.

The basic workflow in the screencast goes like this:
1. Upload the image to Snipshot using a hotkey trigger in Quicksilver.
2. Resize/recrop etc. the image and save it to disk.
3. Rename the file and upload it to my webserver via Transmit and another Quicksilver hotkey.
4. Use TextExpander to speed up the repetitive html coding.
5. Publish the post.

Click to view 60 second picture post screencast (or right/control click to save to disk)

There are 4 tools that provide the foundation for my 60 second blog picture post. They’re listed below and if you’re already a Mac user your probably familiar with at least a couple.

About Quicksilver

Quicksilver (QS) is the glue that holds the whole process together. Nothing has changed the speed with which I can access my files and data and the way I use more computer more than this little program. The best part is it’s free.

Basically what QS does is lets you type in the name of the program, folder, contact or song you want to access and brings it right to you, right now. As fast as you can think it and type it, you can have it with QS. QS also lets you set up hotkey triggers which let you automate tasks and that’s what you see happening in the video above. If you haven’t yet, go download it now.

How to Set Up the 60 sec Pic Post

1. Download and install the 4 tools.

You’ll have to pay for Transmit ($29.95) and TextExpander ($29.95) to get full functionality. QS and Snipshot are free.

2. Set up Quicksilver.

Go to Preferences (either Control click or right click on the Quicksilver icon in the dock to bring up preferences) and make sure Enable advanced features is checked. I also recommend checking Start at login as well.

Just below the Application pane is the Appearance pane. Click it. I recommend that you make sure Superfluous visual effects, Load Icons for all results and Load previews are checked and that down below Command Interface is set to Bezel. None of this is strictly required, but it makes QS (and by extension, you) look much cooler.

3. Set up a Snipshot.app trigger

To set up Snipshot.app (which just auto uploads a picture to the online photo editor Snipshot) you need to create a trigger in Quicksilver. Here’s how:

Open the preferences for Quicksilver again and click on the Triggers tab.

Under custom triggers click on the plus sign at the bottom of the tab and choose Hotkey. When the Trigger window opens, click in the topmost window to highlight it and type in “Finder selection” (without the quotes). You’ll see Quicksilver start suggesting commands as you type. When you’ve finished and your screen looks like the pic below, press tab.

Using the same process as above, begin writing “Open with” and press tab again when you are finished. In the third window type in “snipshot.” Check to see that your screen looks like the one below and click save.

Finally, click in the hotkey area over to the right of your new trigger and give it a hotkey combination (I chose Shift-Command-M). You’re done!

To test it, highlight an image file on your desktop or in finder, hit your hotkey combo (mine’s Shift-Command-M) and watch the sucker load into your browser for speedy editing. Sweet.

4. Set up Transmit

Transmit is a lot like most other ftp clients. You set up an acount with your ftp server info and password, log on and upload files. What sets Transmit apart (at least to my knowledge) is the ability to create “droplets” that you can use to automate your uploading chores.

After you’ve entered your ftp info into Transmit, click on the More options drop down and click on Save as Droplet.

Clicking More options expands the menu. Now you can click on Save as Droplet, highlighted below.

Tip: Be sure to set your Remote path to your blog’s image folder to help keep things organized. You can see the Remote path text box in the screenshot below.

Transmit will ask you to name your droplet, and it will ask if you want to store your password or prompt you for it. I chose to store my password for speed. Click Save and your new droplet should appear on your desktop. Very cool.

Coolest of all: Transmit automatically uses your site favicon. Good times.

5. Set up your Transmit droplet trigger

Follow the same steps outlined above to create a Transmit droplet trigger, but at the end instead of having the third pane reference Snipshot, type in the name of your droplet. When you’re finished your trigger should look something like the screen below. Press Save, give it a hotkey and you’re done.

To test it out, highlight a file from the desktop or finder, hit your hotkey combo (in my case Shit-Command-N) and watch as your file is automagically uploaded to your web server.

6. Lastly, Set up TextExpander

TextExpander is a very cool utility that runs in the background and waits for you to type some previously defined phrase (called a Snippit). When it sees that phrase typed in, it springs into action and inserts a bunch of other previously defined text in its place. An example is helpful, so here goes.

In the video when I’m entering the html code for the image I’m about to post, instead of typing out “img src=”http://pinotblogger.com” align=”right” border=0 hspace=5″by hand, I just typed “imgg.” TextExpander recognized the phrase and replaced it with the string of text above, saving me a bunch of time and mental anguish. I’m not what you’d call a huge fan of HTML, and I suspect you really aren’t either. What this means for you is that you don’t have to remember to include tags like hspace or even what they actually do. Everything’s already baked in.

I find that TextExpander is best for frequently used HTML drudgework, but I also have a list of typically misspelled words in there as well that get automatically fixed as I type. Like I said, pretty cool.

TextExpander installs a preference pane in Apple’s System Preferences program. System Preferences is installed in the dock by default by Apple, so you should be able to access it there. After it loads, look for the blue T button. Click it and this is the screen you’ll see:

Make sure the Enable TextExpander check box is checked, then click the plus sign at the bottom of the pane to add a new Snippit. Enter the plain text and the abbreviation that you’d like TextExpander to replace it with.

Tip: Use %| as a marker for where you want your cursor to go after TextExpander does its thing. For instance, if you were making a snippit so that you won’t have to type out “The pinot noir by [insert chateau] exhibits notes of fetid squirrel and hints of corpulent ganja” every time you review a declassified Burgundy, you’d just replace [insert chateau] with %| and your cursor will always be automatically inserted in just the right spot.

Click save and you’re done!

Conclusion

That wraps up the 60 second pic post how-to, the first and very likely only technical how-to on pinotblogger. If you have any problems setting it up I wish I could tell you to email me for assistance, but I don’t think I’d be much help. Instead I encourage you to fiddle around a bit and check out the websites of each of the tool producers for technical support.

Keep in mind, if I can get it set up, you should be able to as well. The reward is pretty killer when you do get the system working.

Good luck!

Blog Stuff

6 Comments → “Blog Productivity: Edit, Upload & Post a Pic in 60 Sec”

  1. Dr. Vino 4 years ago  

    Holy cow! How long did it take you to do THAT posting with all those images??! Oh, I guess you’re just showing off now! ;-)

    Grrr, Windows user here with 103-step process for working with images…

    Cheers,

    Tyler

  2. Joel 4 years ago  

    Wow, are you kidding? Tyler, seriously?

    I use a PC, SnagIt, and Blogjet. Editing a pic is easy with Snagit (it not Photoshop but its good for blogging) and Blogjet does the rest WYSIWYG.

    Am I missing something?

    I just got an 22″, 2.3GHz iMac and (among other things) I thought blogging would be easier…

  3. Josh 4 years ago  

    Sweet. a PC vs Mac fight on my blog!

    Thanks for the comments Tyler and Joel. I’m by no means a Mac expert, but I do find that I get things done faster with my macbook.

    Images are a big part of a compelling post and the time it was taking me to add them got me twisted. Thats why I was so stoked on this little string of tools.

  4. rama 4 years ago  

    thanks for the tips- I’m a recent Mac convert, so this is quite helpful. BTW- loved the UCD story– what year(s) were you there? I was off campus between 94-96.

  5. RyanF 4 years ago  

    Great post Josh, I just wish I had a Mac. I feel like the only non-mac using loser in the world right now.

  6. Josh 4 years ago  

    He Rama,

    We were there a little later than you – 2002 is when we met. Glad the post was interesting/ useful!

    Ryan,

    You’re not the only one, Joel above seems to like his windows still!