User-friendly cropping of post thumbnails?

Question

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 200x100 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 2x1 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.

Answer 1

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.

Answer 2

Your best bet is to use a javascript based image crop and then php combined with ImageMagick or Image GD.

It would have to be written into your functions or as a plug-in as I don't know off hand of any off the shelf wordpress plug-ins, which is surprising.

There is a YUI image crop with php based save option http://developer.yahoo.com/yui/examples/imagecropper/conn_crop.html

Here is a different tutorial on how to use a jquery cropper with php
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/

A third option very similar to the above link using the same jquery cropper but different code. http://www.leonkessler.com/blog/?p=132

Here is another using jquery's jcrop instead, http://www.talkincode.com/jcrop-extension-implementation-in-php-932.html

Who is up for a new plug-in, this would surely be popular:)

Answer 3

Assuming you already have added support for post-thumbnails, as you're talking about the "Featured Image" option.

If so, one option you have it to add a new image size to the upload array. So by default, you have thumbnail, medium, large. In the following bit of code, this adds a 4th image to that assortment, based on whatever size you desire. This bit of code would be added to your functions.php file.

add_image_size( 'new_thumb', 200, 100, true );

"new-thumb" = the name of the new custom image
"200" = width
"100" = height
"true" = hard crop option. This will force an image to be cropped to the defined width/height. Without, it just scales to proportion.

Now, to display the new thumbnail on a page or post array, you would insert the following into your HTML

<?php the_post_thumbnail('new_thumb'); ?>

Answer 4

You might want to use CSS in order to have big flexibility, fix thumbnailing in your theme (if wanted) and avoid file clutter:

http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

Remember that the whole image will be loaded, so do not use your 3MB originals for this.

Update as per request of Jan: If you do want dynamic clipping, consider:

• For user=administrator, create CSS via PHP; you can just link to the php that reads the appropriate settings and adjust clipping parameters accordingly.
• For user=visitor, use JavaScript to change clipping parameters in the image's style attribute.
• As a less invasive solution, consider creating a shortcode (via the great plugin Shortcode Exec PHP) like [thumb w=?? h=??]url[/thumb] that you can translate to the appropriate HTML tag with inline CSS.

Answer 5

There's an older plugin called WP Post Thumbnail that we sometimes use. It's not perfect, and there are some minor bugs with the latest version fo WP (it hasn't been updated since 2008 so it's not necessarily reliable). http://wordpress.org/extend/plugins/wp-post-thumbnail/

Answer 6

I believe you are looking for this: http://wordpress.org/support/topic/scissors-for-wordpress-29-also-works-on-30-hurray

I haven't tried this out, but it should offer you the functionality you are looking for.

The original plugin page here. http://wordpress.org/extend/plugins/scissors/

I'm needing this for a project I'm working on, too.

Answer 7

I think the ultimate solution to this problem would be to modify the plugin from http://www.seoadsensethemes.com/wordpress-wp-post-thumbnail-plugin/

and customize it so that any custom image sizes defined within your functions.php file (using add_image_size( 'new_thumb', 200, 100, true ); ) automatically get used and then get the code to replace (or extend) the "edit" link when you want to modify an image.

Utilizing this approach wordpress can continue to create its applicable image sizes as it normally does but if you want to specifically modify the cropped area of any specific image you have the ability of doing so which in turn would replace the automatically generated image for that size. Hmmm... although that sounds confusing reading over it again its exactly what I feel is missing.

Currently I believe the plugin saves these custom image sizes to a custom field within a post instead of a the post for an applicable image.

Answer 8

I've decided to crop thumbnails using the native "wp_get_attachment_image"... here goes an example of a image gallery, with cropped thumbnails

http://wpworks.wordpress.com/2010/12/27/image-gallery-with-image-crop/

Best Regards