Cropping Post Thumbnails from Top instead of Center in WordPress

WordPress Posts  Thumbnails or Post Featured Images  is a theme feature introduced with Version 2.9. Thumbnail is an image that is chosen as the representative image for Posts, Pages or Custom Post Types. The display of this images is up to the theme. This is especially useful for “magazine-style” themes where each post has an image.  (as stated in WordPress codex)

There is problem with WordPress Posts Thumbnails, generated thumbnails are cropped from the center. What if we want to crop thumbnails from top instead of center? especially for portrait images

1. Open functions.php in Theme Editor or Text Editor (Notepad++ / Coda)

2. Add the following code to functions.php

function px_image_resize_dimensions( $payload, $orig_w, $orig_h, $dest_w, $dest_h, $crop ){

// Change this to a conditional that decides whether you want to override the defaults for this image or not.
if( false )
return $payload;

if ( $crop ) {
// crop the largest possible portion of the original image that we can size to $dest_w x $dest_h
$aspect_ratio = $orig_w / $orig_h;
$new_w = min($dest_w, $orig_w);
$new_h = min($dest_h, $orig_h);

if ( !$new_w ) {
$new_w = intval($new_h * $aspect_ratio);

if ( !$new_h ) {
$new_h = intval($new_w / $aspect_ratio);

$size_ratio = max($new_w / $orig_w, $new_h / $orig_h);

$crop_w = round($new_w / $size_ratio);
$crop_h = round($new_h / $size_ratio);

$s_x = 0; // [[ formerly ]] ==> floor( ($orig_w - $crop_w) / 2 );
$s_y = 0; // [[ formerly ]] ==> floor( ($orig_h - $crop_h) / 2 );
} else {
// don't crop, just resize using $dest_w x $dest_h as a maximum bounding box
$crop_w = $orig_w;
$crop_h = $orig_h;

$s_x = 0;
$s_y = 0;

list( $new_w, $new_h ) = wp_constrain_dimensions( $orig_w, $orig_h, $dest_w, $dest_h );

// if the resulting image would be the same size or larger we don't want to resize it
if ( $new_w >= $orig_w && $new_h >= $orig_h )
return false;

// the return array matches the parameters to imagecopyresampled()
// int dst_x, int dst_y, int src_x, int src_y, int dst_w, int dst_h, int src_w, int src_h
return array( 0, 0, (int) $s_x, (int) $s_y, (int) $new_w, (int) $new_h, (int) $crop_w, (int) $crop_h );

add_filter( 'image_resize_dimensions', 'px_image_resize_dimensions', 10, 6 );

3. Download Regenerate Thumbnails plugin from repo and install Regenerate Thumbnails. This plugin takes post thumbnails and crops them again using your latest media settings.

4. After you install it click on the “Regenerate All Thumbnails” button under tools. It will automatically crop all the post thumbnails again

Credits: thank you,  E. George Stephanis for awesome code


Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: