• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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

  • How To Add Custom Image Sizes In WordPress

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.