the_post_thumbnail scaling not hard cropping

by

Lately I wanted to upgrade my blog with featured images/post thumbnails. I’m using a custom theme build on the roots theme (this is not a roots theme issue, I believe). The image I upload is 1024×768 and shall be cropped to letterbox format 1024×512.

This is the code I’m using in the theme-file:

<?php
    if ( has_post_thumbnail() ) {
    the_post_thumbnail(array(1024, 512), array('class' => 'img-responsive')); // add post thumbnail
        }
    ?>

Now, the problem is, that on my local XAMPP box it works perfectly well. But on the webserver images aren’t cropped and, they do not span the entire width of the primary content area, as they do on the local install. Checking the code with Firebug, the image is 682px wide and 512px tall (1024 x 512px on the XAMPP box). So what happens is that the image is scaled, not cropped.

I re-uploaded the theme and I disabled all plugins. And of course I searched related topics, tried other code samples, checked that GD is enabled – it is and regenerated thumbs. None of this solved the problem.

Any ideas greatly appreciated.

3 Answers
3

Per the Codex entry for the_post_thumbnail(), passing an array has not worked since WordPress 3.0:

PLEASE NOTE: The crop does not work in WP 3.0+. All that is needed for WP 3.0+ is the call for the thumbnail to post. Then proceed to media in the dashboard and set your thumbnail to crop to the size you wish to use.

The correct implementation is to create a custom image size with your array values, via add_image_size() inside the Theme setup function (or any other callback hooked into after_setup_theme):

add_image_size( 'custom-size', 1024, 512, true );

…then call that size directly:

the_post_thumbnail( 'custom-size' );

Leave a Comment