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.
