I am setting up a website gallery where the uploaded screenshot is 1400px wide and height varies.

On my post index page, I need to display a thumbnail of only 900 pixels by 600 pixels. However this is cropped from center/center. Is there a way to crop the image from top center?

There is a similar ticket How can I make add_image_size() crop from the top? but am unable to understand it.

Also I have activated the plugin Jetpack's Photon module which serves images from the WordPress cloud. It takes the URL and the size and converts it into

http://i0.wp.com/flattrendz.com/wp-content/uploads/symbolset.jpg?resize=900,600 and the original image is http://flattrendz.com/wp-content/uploads/symbolset.jpg.

Any knows how to make this photon module crop image from top center?

1 Answer 1


We discussed about this issue in the WordPress.org support forums. Here is a code that should do the trick:

 * Let's add support for Photon - that won't be necessary once Jetpack 2.3.2 is out. 
 * You'll be able to use apply_filters( 'jetpack_photon_url'... directly
 * See http://jetpack.me/2013/07/11/photon-and-themes/
if( function_exists( 'jetpack_photon_url' ) ) {
    add_filter( 'jetpack_photon_url', 'jetpack_photon_url', 10, 3 );

 * Let's add resized post thumbnails
 * We use a different size on single pages
function jeherve_display_custom( $content, $post ) {
    global $post;

    // If you didn't define a post thumnail, let's forget about all this
    if ( !has_post_thumbnail( $post->ID ) )
        return $content;

    // What's the cropping and the size of image we should use on Single pages? Here we crop to top center and create a 500 x 500px image
    // See http://developer.wordpress.com/docs/photon/api/#crop for parameters
    if ( is_single() ) {
        $args = array(
            'crop'   => '30,0,40,50',
            'resize'   => '500,500',
    // resizing on other pages - some random resizing here
    else {
        $args = array(
            'resize'   => '200,400',

    // Let's create a Photon Image URL from the Post Thumbnail
    $feat_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full');
    $photon_image_url = jetpack_photon_url( $feat_image_url[0], $args );

    // Let's build the image tag, as it was built before in your example
    $our_image = sprintf( '<div class="post-media"><a class="featured-image" href="%1$s" title="%2$s"><img src="%3$s" class="wp-post-image" alt="Featured Image"></a></div>',
        esc_url( get_permalink() ),
        esc_attr( sprintf( __( 'Open %s', 'dot' ), get_the_title() ) ),
        esc_attr( $photon_image_url )

    // Let's return the image, right before the post content
    return $our_image . $content;

add_filter( 'the_content', 'jeherve_display_custom' );

Here is an example, with the single page crop mentioned above:

For reference, you can check the Photon API documentation available here.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.