Change Image Crop Position For Custom Sizes

In this post, i’ll show you how to register a new custom image size or modify an existing featured image size so that the image size can be cropped in a specific position rather than the default.

This tutorial answers this forum question:

On my homepage grid above each post I show the featured image but it crops at the center and would prefer it to crop at the top.

Default Crop Position

Before WordPress 3.9 was released, you would add custom images sizes in your functions file using code like this:

add_image_size( 'custom', 600, 300, true );

New Crop Position Values

You can now add an array to the 4th parameter which includes values for X Crop Position and a Y Crop Position.

This enables you to specify where your custom image size is copped:

The X position accepts ‘left’ ‘center’, or ‘right’.
The Y position accepts ‘top’, ‘center’, or ‘bottom’.

Example:

add_image_size( 'custom', 600, 300, array( 'left', 'top' ) );

Simply add the above PHP code to your child themes functions.php file and modify the parameters to suit your own needs.

You can also regenerate thumbnails if you want to change the crop position of existing images already uploaded.

Adding the code will only effect new uploaded images unless you regenerate thumbnails.

9 Crop Position Example Snippets

History

The enhancement to the $crop parameter has now been included in the WordPress core after the ticket was first opened for discussion back on 11/29/11.

custom Image size crop position

Related Tutorials

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.