WordPress 3.9 has introduced a new feature that allows users to control the crop position of images uploaded in WordPress. This feature has been added by Brad Touesnard and is now included in WordPress core. In this article, we will not only elaborate on how to take advantage of this new feature but also provide a comprehensive guide on customizing image sizes in WordPress.
Adding or Customizing Image Sizes
By default, WordPress generates three additional versions of an uploaded image: a ‘Thumbnail’, a ‘Medium’, and a ‘Large’ version. The original image size uploaded is referred to as the ‘Full’ version. Users can overwrite the default values of each of these crop sizes by going to their WordPress Dashboard, Settings >> Media and changing the values there. Alternatively, users can do so via their theme or plugin functions file.
Adding Additional Sizes
Users can quickly and easily add additional image sizes by placing the function “add_image_size” in their theme or plugin functions file. It is important to give each additional image size its own unique name. Everything users need to know can be found via the WordPress Codex.
Controlling the Crop Position
The parameter $crop was previously just a Boolean value, true or false. Either a soft proportional crop or a hard crop if set to true. However, users can now use an array to specify positioning of the crop area, (x_crop_position, y_crop_position). For example, users can crop images from the center by using the following function:
add_image_size( ‘homepage-thumb’, 250, 250, array( ‘center’, ‘center’ ) );
The $crop parameter still accepts true/false values and is fully backwards compatible. The syntax is identical to that of the CSS background-position property, so it is familiar to both designers and developers.
Using Custom Images
To call a custom image in a theme or plugin, users can use the following code:
the_post_thumbnail(‘homepage-thumb’);
Or:
wp_get_attachment_url( get_post_thumbnail_id($post->ID, ‘homepage-thumb’) );
Regenerating Thumbnails
After making use of this new feature by adding a custom cropping position or changing/adding a new crop size, users are left with what was generated at the time of upload and none of these new image versions are available to them. Fortunately, the regenerate thumbnails plugin can solve this problem. This plugin will cycle through all existing uploaded images and regenerate all of the new image sizes users have added or customized.
Hard Vs. Soft Crop
There are two types of crops: hard and soft. A hard crop scales and then crops the image to the exact dimensions specified. Depending on the proportion of the image in relation to the crop size, the chances are the image will always be cut off. On the other hand, a soft crop will never cut off any of the image. It will scale the image down until it fits within the dimensions specified, maintaining its original aspect ratio.
Something Worth Knowing
In the event that any dimension of the uploaded image (width or height) is smaller than that of the set crop size, it will be skipped, and a version for that size will not be made. WordPress will cycle through all the set image sizes and only create the versions of those images that are bigger than that of the version it is trying to generate. In such a case, when an image is being retrieved within a theme or plugin and does not exist, it will default to the original, ‘Full’ image as a fallback.
Conclusion
WordPress 3.9 has introduced a new feature that allows users to control the crop position of images uploaded in WordPress. This feature is a great addition to WordPress and can be used by developers and designers alike. Users can customize their image sizes, add additional sizes, and control crop positions. The regenerate thumbnails plugin can solve the problem of new image versions not being available. Users can choose between hard and soft crops, and in the event that any dimension of the uploaded image is smaller than that of the set crop size, WordPress will default to the original, ‘Full’ image as a fallback.
