Crop and Resize images in WordPress: how to change cropping origin?

Ok, let’s recall how WordPress currently (version 3.8 as I write) does manage images, cropping and resizing.

Some basic knowledge of the image workflow in WordPress:

Images in WordPress are truly posts of the type “Image”. These posts can be attached to a content post or can be independent. It will depend if you attach it from the Media screen or you attach it from the Edit Post/New Post screen.

Everytime you upload an image, the subsequent resized images are immediately created. They will have the sizes determined as standard: the defaults are explained here https://codex.wordpress.org/Function_Reference/the_post_thumbnail. These are thumbnail, medium, large, 150×150, 300×300 and 640×640, plus the full size.

It is funny that WP maintains the naming “thumbnail” for all of them, this is a bit confusing as a naming. Probably has to do with legacy code…

Post thumbnail is also the naming used for “featured image”.

Things you can do with thumbnails:
– You can resize the existing types. You can do that already from the admin menu, but you can also use the function
– You can create new image sizes

The problem comes when you create new image sizes, because if they do not have the aspect-ratio of the thumbnails, they will have to be cropped as well as resized.

What I mean is that, if you have an image 800×600 (4:3) and resize it to 800×300, then the image will be cropped at the center. But maybe you want to have it cropped from the top.

The standard is center,center for x,y. But other options should be given.

As Brad Touesnard proposes with this patch to the WordPress core http://bradt.ca/blog/image-crop-position-in-wordpress/. This patch is currently under discussion, two years after it was proposed by Bradt https://core.trac.wordpress.org/ticket/19393.

I believe that such change is needed in WordPress core, because it will allow to have other cropping options, for example cropping from the top instead of the middle in the y-axis. This is useful for many situations where you have a header/title in the image, or the head of a person. These types of images would look really bad if the head or title is cut by the middle.

Advertisements

Custom thumbnail sizes in WordPress: tips and hints to master them

I am working on a new WordPress theme and have identified several issues with the thumbnails.

Some initial clarifications:

When you use the function to get the thumbnail from a post, what you will be getting is the featured image.

Initially WordPress comes with pre-defined sizes by default:

the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)
the_post_thumbnail('full');            // Original image resolution (unmodified)

 source: http://codex.wordpress.org/Post_Thumbnails

You can define custom sizes and names for new types of thumbnails. 

But you will have to regenerate the thumbnails in order to have the new images created, in case you would like to use the “crop” parameter, that is, that the image created will not be a resize, but rather taking the content from the center of the existing full-size image. 

This is explained pretty well here: http://codex.wordpress.org/Function_Reference/add_image_size

What is not explained in the Codex documentation is that the crop option will not work unless you regenerate the thumbnails. How do you regenerate the thumbnails?

There are several alternatives that I am aware of:

1. Delete permanently and upload the image again

2. Use the regenerate thumbnail plugin: http://wordpress.org/plugins/regenerate-thumbnails/

3. With PHP code, doing something like this:

include( ABSPATH . ‘wp-admin/includes/image.php’ );
wp_generate_attachment_metadata( $thumbnail_id, $absolute_path_to_image );

following this: 

http://codex.wordpress.org/Function_Reference/wp_generate_attachment_metadata

A discussion on this can also be found here http://wordpress.stackexchange.com/questions/35833/the-post-thumbnail-hard-cropping-not-working-no-matter-what/128032#128032