WordPress.org

Plugin Directory

Crop-Thumbnails

"Crop Thumbnails" made it easy to get exacly that specific image-detail you want to show in the automatic cropped post-thumbnails.

How do i add custom image sizes?

The plugin do not add additional image sizes, it only make it possible to edit the crop area. You can add image sizes with normal wordpress functions (see: https://developer.wordpress.org/reference/functions/add_image_size/).

Simply add the code to the functions.php of your theme, i.e.:

add_action( 'after_setup_theme', 'my_adjust_image_sizes' );
function my_adjust_image_sizes() {
    //add an cropped image-size with 800 x 250 Pixels
    add_image_size( 'my-custom-image-size', 800, 250, true );
}

After you add the image-size any futher image uploads will produce a cropped image "my-custom-image-size" which you can use in post-loop:

if ( has_post_thumbnail() ) { 
    the_post_thumbnail( 'my-custom-image-size' ); 
}

What internal rules use the plugin for cropping?

  • The plugin will only crop image-sizes where crop is set to "true" (hard crop mode - see: http://codex.wordpress.org/Function_Reference/add_image_size).
  • If you had set one of image dimension in add_image_size to "0" or "9999" (an set crop to true) the plugin will crop it in the ratio of the original image.
  • You are able to crop all images with the same ratio at once (default) or and any imagesize (and ratio) seperate.

I have cropped the image but the old one is used on the page.

If you had viewed your image on the site before, your browser has cached the image. Go tell them to reload the fresh image from the server by hitting "F5".

Is it possible to crop an non-cropped image-size?

No. The purpose of this plugin is to provide control for the wordpress automatic crop. If you want to crop let's say the full-size image you should

  • a) upload it in a better format in the first place
  • OR b) use the Standard WordPress-Image editor to crop the image.

Is it possible to adjust the css-style of the crop-thumbnail window?

Yes, for a simple test, copy the css/cpt-window.css file into your template_directory and make some change. Then add this code into the functions.php of your template.

add_filter('crop_post_thumbnail_window_css','myCustomStyle');
function myCustomStyle($content) {
    $content = get_bloginfo('template_directory').'/cpt-window.css';
    return $content;
}

I have two image-sizes that have nearly the same ratio. I want to make use of the feature "Crop all images with same ratio at once", but cause the ratios are slightly different they wont be selected together.

You can add the following filter in the functions.php of your theme to adjust the ratio of one or more specified image-sizes. CAUTION: use only when the ratios are really close.

add_filter( 'crop_thumbnails_editor_printratio', 'my_crop_thumbnails_editor_printratio', 10, 2);
function my_crop_thumbnails_editor_printratio( $printRatio, $imageSizeName) {
    if($imageSizeName === 'strange-image-ratio') {
        $printRatio = '4:3';//do override ratio
    }
    return $printRatio;
}

Can i make the modal-dialog fullscreen?

Yes, i added a filter with some settings for the modal-dialog, so you can adjust the size:

add_filter('crop_thumbnails_modal_window_settings','crop_thumbnails_modal_window_settings_override');
function crop_thumbnails_modal_window_settings_override($param) {
    $param['limitToWidth'] = false; //You may set a number, then thats the maximum width the modal can be. On small screens it will be smaller (see offsets). Set to FALSE if you want no limit.
    $param['maxWidthOffset'] = 0; //window-width minus "width_offset" equals modal-width
    $param['maxHeightOffset'] = 0; //window-width minus "height_offset" equals modal-height
    return $param;
}

I have show the cropped image in the backend in an custom meta-box. It does not update after the modal-dialog closed. Is there a way to fix this

Yeah, there is a way. After the crop-thumbnails-modal closed it triggeres a javascript event on the body element. You could use jQuery to cache-break your cropped thumbnail (in backend-view). The event called "cropThumbnailModalClosed". The plugin also provides a global function that could be called (only in post-edit-view and mediathek) to do the cache-break. Example-Code:

$('body').on('cropThumbnailModalClosed',function() {
    CROP_THUMBNAILS_DO_CACHE_BREAK( $('.your-image-selector') );
});

What languages are supported?

  • English
  • German (de_DE)
  • brazilian portuguese (pt_BR) - thanks to Alex Meusburger
  • Ukrainian (uk) - thanks to Jurko Chervony from http://www.skinik.name

I want to contribute code.

Fantastic, i published the code on github: https://github.com/vollyimnetz/crop-thumbnails. But be warned, i am carefully evaluate new features.

If you fork and planning to publish the forked plugin, please contact me.

Requires: 4.0 or higher
Compatible up to: 4.5.2
Last Updated: 6 days ago
Active Installs: 10,000+

Ratings

4.6 out of 5 stars

Support

2 of 3 support threads in the last two months have been marked resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1
100,1,1 100,2,2 100,1,1 100,1,1
100,4,4
75,4,3
50,2,1
100,3,3
100,1,1 100,2,2
100,1,1
0,1,0
100,1,1
100,3,3 100,1,1
100,1,1 100,2,2
50,2,1