33

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.

The Address Book image cropper in action

10
  • 1
    @Jan Fabry - My very first paying WordPress project was a plugin for cropping images, before cropping came in WordPress. It was significantly different than you ask for or I'd include it as an answer. But what you want shouldn't be too hard to write if you are motivated... Oct 19, 2010 at 4:30
  • 1
    @Mike: I saw that once on your website, and I was hoping it would be available somewhere. Even if it doesn't tick off all items of my (extensive) wishlist, it could provide a good start.
    – Jan Fabry
    Oct 19, 2010 at 6:10
  • @Mike -- I would also be very interested to review any code you might have created or modified related to image cropping. I have been desperately looking to add jcrop to a custom metabox which would allow for adding and cropping images while still utilizing the built in wordpress media gallery. Oct 19, 2010 at 12:22
  • Hey @Jan Fabry and @NetConstructor.com - I just reviewed the code and since it was my first plugin for WP I'm too embarrassed to release it, it is that bad. I'd love to work on a newer solution for release here but that might be a while... Oct 20, 2010 at 7:54
  • Don't be shy Mike, older code is always bad in the writer's own eyes. That's just progress :). @Jan - in your UI example, it looks to me that the post thumbnail size is somehow pre-defined. Can you say more about that?
    – hakre
    Nov 14, 2010 at 23:28

8 Answers 8

11

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

4
  • code ready for release yet? maybe github it? I'm dying to integrate functionality like this into my boiler
    – Mild Fuzz
    Nov 23, 2010 at 14:35
  • I am also very interested in what/how you did this! Please do share the code. Does your code work using the default wordpress media library and does it allow you to create a simple metabox on the post edit screen where you can call a specific image AND copy it just for a specific size which you created such as "new_thumb" as defined through something like add_image_size( 'new_thumb', 200, 100, true );? The ideal situation would be to have something just like the header image creator with the ability to change each defined image size based on individual metaboxes for each size defined. Nov 26, 2010 at 18:46
  • @JanFabry have you released this code as a Plugin yet? I would love to recommend it to someone who needs this functionality! Jan 5, 2012 at 15:17
  • @jan-fabry How did this function go? Any success?
    – Steven
    Apr 23, 2012 at 9:11
4

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
  • There is already image crop code (HTML, JS and PHP) within wordpress core. I think a good plugin would re-use that. It's not a must, just saying so. You're just right about the fact that the example UI drawn by Jan needs something like that.
    – hakre
    Nov 12, 2010 at 0:30
  • @hakre, the last one Wyck linked to is jcrop which was integrated into the wp core back in 2.8. I remember reading about it back then but I can't find any information on it actually being used other than one plugin in the repository which by all accounts is broken.
    – matt
    Nov 14, 2010 at 16:37
  • @matt: if it was integrated into the core (I do not know all specifics about the crop UI in core right now that is there) I assume that it is used for the core image UI feature. That feature is not available all the time but only if certain PHP or system image libraries are available. Sorry for being that unspecific but it's just that I didn't into the core implementation so far. But I know there is one ;)
    – hakre
    Nov 14, 2010 at 22:12
1

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'); ?>
1
  • @cnix: Thanks for this answer, but it is not what I'm looking for. I want a way for the enduser to define the area that should be cropped, not me as a designer of the site. So the area can vary from image to image.
    – Jan Fabry
    Oct 29, 2010 at 21:54
1

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.
4
  • Indeed, you can do the cropping via CSS to avoid having multiple sizes, but how would you let the user (author of the post) define the crop area that should be shown?
    – Jan Fabry
    Nov 9, 2010 at 20:31
  • Please see edits above.
    – Raphael
    Nov 9, 2010 at 20:57
  • Thanks for your clarification. This assumes the user knows the pixel locations of the desired crop area? I am actually looking for a more graphical way (like the current image editor, but targeted to post thumbnails and not regular thumbnails).
    – Jan Fabry
    Nov 9, 2010 at 21:01
  • I hope you intend this to be a plugin then, not some hack. You can provide some default options that shoud suffice in most cases: corners, center, centered on edges and so on (all easily computed). I would refrain from offering free input since people can mess up the site's flow badly if they enter crap. Offering a graphical clip definer (see Zenphoto for implementation) is fine, I guess, but the principles of how to use the values, however obtained, stay the same; you just have to build the GUI. This I can not help you with.
    – Raphael
    Nov 9, 2010 at 22:04
1

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/

1

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.

1
  • Thanks for the suggestion. I have looked at Scissors (and knew that someone upgraded it to 3.0), but I think it is too flexible for what I want: must a cropper that will crop to a predefined size. Scissors can do much more, and could therefore confuse my end-users.
    – Jan Fabry
    Nov 16, 2010 at 20:46
1

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.

1

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.