Note: This guide will show you how to edit Core WordPress files, I don’t really recommend it. Only use it if you know what you are doing. The guide was written a long time ago when you couldn’t define custom crop locations, you can now set your crop location when using the add_image_size function so this guide isn’t applicable anymore.
I’ve been using the new WordPress post thumbnails function a lot lately in theme development. I’ve turned away from the slower, less efficient and less secure method of using the TimThumb script for resizing images on WordPress powered sites.
And while it’s a great function to have built into WordPress, it does have it’s “flaws”, such as the fact that there isn’t any parameter for defining the cropping location/position of the image when re-sized.
Cropping Location
When working on my site the other day I noticed that when the WordPress theme thumbnails were being cropped the whole top half was being cut off not really giving people a good idea of what the theme would actually look like.
Below is just a funny picture I found showing you another reason why you may want to choose different cropping locations for your images as opposed to always using the default “center” cropping.
Change The Default Center Cropping For Thumbnails
Unfortunately to change the cropping location for thumbnails you will have to get your hands a bit dirty with the Core WordPress files. Simply follow the steps below for changing the crop location of your Thumbnails (not this will change it for ALL thumbnails defined in your functions.php and media settings).
- Step 1: Browse to your wp-includes folder
- Step 2: Find and open the media.php file
- Step 3: Locate the following code (around line 3.61 in WordPress 3.1.1)
$s_x = floor( ($orig_w - $crop_w) / 2 );
$s_y = floor( ($orig_h - $crop_h) / 2 );
- Step 4: Edit The code to suit your needs (see explanation below)
Changing The Cropping Values
Those two lines you found are in charge of cropping your thumbnails. The default is to take the original width and height and crop them equally towards the center. However you can easily change it to crop to the top, left, top left…etc
Crop From The Top
To crop from the top you simply need to make the y value equal to 0, so change the second line of code to look like this:
$s_y = 0; // floor( ($orig_h - $crop_h) / 2 );
Crop From The Center Left
To crop from the left you need to make the x value equal to 0, so change the first line of code to look like this:
$s_x = 0; // floor( ($orig_w - $crop_w) / 2 );
Crop From The Top Left
Combine the last two samples to crop an image from the top left.
$s_y = 0; // floor( ($orig_h - $crop_h) / 2 );
$s_x = 0; // floor( ($orig_w - $crop_w) / 2 );
Re-Generate WordPress Thumbnails
Don’t forget that if you change the cropping location for your thumbnails you will have to re-crop them all. You can do this easily with either of the following two plugins: AJAX Thumbnail Rebuild or Regenerate Thumbnails.