Using photon with different resizing on different pages

This post should contain all the information you’re looking for:
https://jetpack.me/2013/07/11/photon-and-themes/

You will be able to use the resize argument to specify different sizes for your images.

@jeremy,
Thanks for the reply. I already went through those links but still cannot figure out. ?? how to do it for post featured images.

Secondly when resizing, is it possible to crop from top center?

Let me use an commented example to try to explain: here is what you could add in your theme’s functions.php file, instead of adding code to your home page and your single.php file.

First, let’s add support for Photon, as explained in the end of this post:
https://jetpack.me/2013/07/11/photon-and-themes/

if( function_exists( 'jetpack_photon_url' ) ) {
    add_filter( 'jetpack_photon_url', 'jetpack_photon_url', 10, 3 );
}

Then, let’s build and add the Featured images right before the post content. These images will be of a different size whether you’re on a single page or not:

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?
	// See https://developer.wordpress.com/docs/photon/api/#crop for parameters
	if ( is_single() ) {
		$args = array(
		    'crop'   => '50,50,200px,200px',
		);
	}
	// resizing on other pages
	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' );

Secondly when resizing, is it possible to crop from top center?

As you can see, on single pages I used the “crop” parameter. You can play with values to get the crop you need, based on the explanations here:
https://developer.wordpress.com/docs/photon/api/#crop

@jeremy,

Thank you so much. This is really a neat way of doing things.

I have tried the cropping function but still unable to get it to crop from center. Getting cropped from top is simple by using 0 as the offset but i tried percentage am not sure.

I ended up using script mentioned in this post https://bradt.ca/blog/image-crop-position-in-wordpress/ and then activating the photon module. So now this script does the cropping and then photon loads the image from cloud.

But I like your approach better as I am assuming in your example, I no additional cropped images are saved on my server. I just wish I could figure out how to get it to work from center.

You will have to edit my code a little to be able to create a top-center crop. You will have to use both the ‘resize‘ parameter to define the size of your thumbnail (500 x 500px in my example), and the ‘crop‘ parameter to define a top center crop with the following parameters:

$args = array(
    'crop'   => '30,0,40,50',
    'resize'   => '500,500',
);

Here is an example:

• Original Grid image
• Smaller image using the arguments I noted above

If you’re satisfied with this cropped image, try playing with the parameters in the URL until you get something you like; the grid should help you figure out where you are on the picture.

Wow. That is more detailed explanation ever. Thank you Jeremy especially for the time to understand my query in detail and answer with example.
I too have a plugin and understand time it takes for support.

Thank you so much.

Hello Jeremy,

I apologize to mark this post as unresolved again.

I wanted to know this:

Please visit https://flattrendz.com/. Now I have directly activated the Photon Module fro jetpack. Now the thumbnails are resized automatically but from the center. Can I override this using any function you shared above so that the resizing or cropping is done from center top?

If I stop using the photon module, I have a custom resize script that crops it properly from top center. if you want to see it let me know and I will disable Photon

Hello,

I used some bits from your code:

$args = array(
‘crop’ => ‘250px,0,900px,600px’,
‘resize’ => ‘900,600’,
);

// 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), ‘thumbnail-large’);
$photon_image_url = jetpack_photon_url( $feat_image_url[0], $args );

An then echoed the $photon_image_url. This has got it to work. But with this large markup

<img src=”https://i1.wp.com/flattrendz.com/wp-content/uploads/wrightfeldhusen.jpg?fit=1400%2C9999&crop=250px%2C0%2C900px%2C600px&resize=900%2C600″&gt;

This has got it to work, but is this the correct way?

This has got it to work, but is this the correct way?

Sure. You can add as many parameters as you’d like to the Photon URL. The full list is available here:
https://developer.wordpress.com/docs/photon/api/

Thanks for the support Jeremy. I am finally able to take advantage of this great feature.

Also another issue I faced was since I am hard coding this in my theme, it does not work on sites am testing locally.

I assume I would have to make a function for this like your example instead of hardcoding.

Thanks again.

You won’t be able to use Photon in a local environment, since you cannot connect Jetpack to WordPress.com is your site is not publicly accessible.

I’m afraid you would have to create a test site on a public server to be able to test Photon features.