WordPress.com Thumbnail Editor

Select which portion of a fullsize image you want to use for the thumbnail.

What does this plugin do?

The plugin provides a helpful interface for direct control over the look of your thumbnail images. Select the crop location and portion of the fullsize image you’d like to use and the plugin takes care of the rest.

How do I set it up?

After you’ve activated the plugin, edit any image, and you’ll see a new “Show Thumbnails” button:

Thumbnail button

When you click the thumbnail to edit, you’ll be taken to a screen where you can crop your image:

Crop

Ratio Mapping Support

If you have 10 different 3:2 images and you want to apply the same crop to them all, you have to edit each one individually. The plugin supports ratio mapping, which is like saying “all these add_image_size definitions belong together”. Instead of having the user edit every single thumbnail, they only need to edit one image per ratio definition.

Photon is smart enough so that you can save the same coordinates for each image definition and have it output a cropped result that is proportionate. When the user saves one image for a given ratio, it looks at the image ratio map and just updates the meta value so it applies to all the similar crops for that image.

Here’s how you can define a custom image map:

add_filter( 'wpcom_thumbnail_editor_args', function( $args ) {
	$args['image_ratio_map'] = array(
		'3:2' => array(
			'150x100',
			'loop-thumbnail',
			'slider-thumbnail',
		),
		'16:9' => array(
			'slider-wide',
			'post-header',
		)
	);

	return $args;
} );

The structure of the image_ratio_map looks something like:

array(
	'ratio-name' => array(
		'image-size-name',
	),
);

If the image_ratio_map is not defined, the plugin will just default to standard behavior, which is individual crops for all image sizes.