User-friendly cropping of post thumbnails?

Is there a way to let my users define the crop area of a post thumbnail? The thumbnails always are existing post attachments, I would rather not create an extra attachment per thumbnail.

The post thumbnails should be 200×100 pixels, and come from one of the images used in the post. So in my ideal world, when you click the “Set Featured Image” link, you get an overview of the already included images, and when you click one of these, you can define the crop area yourself (moving or resizing it, but keeping the 2×1 aspect ratio). When you click “OK”, the new post thumbnail is saved with the original attachment (in the _wp_attachment_metadata['sizes']['post-thumbnail'] metadata field for example), not as a new attachment. Using an image that is already used as a post thumbnail for another post should not be allowed, or at least give a warning.

I believe the included image editor will not suit my needs, since you can choose to edit all versions of the image, or the regular thumbnail, but not only the post thumbnail. I also find it a bit confusing to know what versions I am editing, so I think my users will have even more trouble with it.

Is there a plugin that does what I want, or that I can easily extend to my needs?

Update: Example UI

I really like the interface of the Mac OS X Address Book image picker: you select an image, and resize a fixed ratio thumbnail cropper via a slider. You can also drag the base image around. You can expand this idea to multiple image sizes (I have a post-thumbnail and post-thumbnail-1/2 that’s half that size, for example). Let the user select the sizes (s)he is editing now with checkboxes, and draw the appropriate crop rectangles on the screen.

The Address Book image cropper in action


The code is still a mess, but it seems to work, even on IE 8. I plan to release it in the repository, but in the meantime you can play with my current version. To access it you click the “Edit Image” when adding or editing an image, it replaces the usual image editor (they are very hard to combine). Since most of the admin area uses the regular thumbnail and my current version edits the post thumbnail, it might seem the code has no effect, but try it by showing a post thumbnail and you should see it change.

This plugin requires my On-Demand Image Resizer, which is also still a mess, to do the actual resizing.

Example image in the cropper

Leave a Comment