In-browser, in-WordPress photo editing with Picnik

First published on November 17, 2007

Picnik is a free in-browser, Flash-based photo editor. It contains the handy crop, resize, and rotate functions, as well as a wealth of filters, effects, and text and frame functions. What impressed me was how fast it loads and how lightweight it seems to be.

With its API, there is a great opportunity to write extensions to make it work with other applications, such as, say… your blog! Sometimes I have photos to upload to a post but it takes a while to load up a bloated desktop photo editor. For WordPress, plugins such as the WP Vivtiger Image Resizer enable you to work with images within your admin panel and are quite useful. Picnik could also integrate into your blog quite seamlessly. I hacked together a quick and dirty plugin that integrates Picnik and WordPress.

First, when you’re creating or editing a post, click the Picnik tab in the usual upload section:

Once you’ve uploaded an image from your computer, you’ll be presented with the Picnik interface, fitting snugly into your WordPress window.

You probably can’t do much in this small window, so click the Fullscreen button in the top right of the Picnik interface. Once you are in fullscreen mode, note that there’s a nice bold Send it back to my WordPress site button for when you are done editing.

For this example, I cropped a photo, adding some text, applied the sepia filter, and added a frame. Now, I’m no photo editing expert, but these Picnik functions were accessible and quite easy to use…

Once you’ve sent the image back to WordPress, you can fill in the usual Title and Description fields for the image.

Then, use the usual WordPress interface to add the image to your post.

And finally, here’s the edited image, embedded into a blog post!

You can download the WordPress-Picnik plugin here (it’s unofficial… ’twas me who made it after all). Note that you will need to get a free Picnik API key and enter it into the $picnik_api setting near the top of the plugin file (it’s the only setting). Then, just upload it to your WordPress plugins folder and activate it!

There are some massive limitations to my plugin in that it won’t edit images that you’ve already uploaded to your blog, and the coding is probably a bit shaky because I hacked together parts of the WordPress files upload code. I have no intention of providing support for the plugin or on developing it further. However, it works for me as demonstrated above and can serve as a good starting basis for further development (please steal any of the code and improve it — I’ll be happy to publicize your version!).

Facebook Twitter Email this

This entry is filed under Blogs, WordPress and written by Peter Keung. You can follow any responses to this entry through the RSS 2.0 feed.