User-friendly cropping of post thumbnails?

1 Views

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.

Read More

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

Post Views: 1

Related posts

Leave a Reply

8 comments

  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.

    Example image in the cropper

  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:)

  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'); ?>

  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.

  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.