WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Using photon with different resizing on different pages (12 posts)

  1. Harish Chouhan
    Member
    Posted 1 year ago #

    Hello,

    For my website which uses a custom theme I want to use resize the featured image based on whether the user is on a blog index page or a single page.

    I use below code:

    <?php if (has_post_thumbnail( $post->ID ) : ?>
                        <?php
                                $image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'thumbnail-large' );
                        ?>
                            <div class="post-media">
                                <a class="featured-image" href="<?php the_permalink(); ?>" title="<?php printf(__('Open %s', 'dot'), get_the_title()); ?>"><img src="<?php echo $image; ?>" class="wp-post-image" alt="Featured Image"></a>
                            </div>
    
                        <?php endif; ?>

    This same code is placed in both index.php and single.php. How do resize them?

    http://wordpress.org/extend/plugins/jetpack/

  2. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

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

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

  3. Harish Chouhan
    Member
    Posted 1 year ago #

    @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?

  4. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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:
    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 );
    }

    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 http://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:
    http://developer.wordpress.com/docs/photon/api/#crop

  5. Harish Chouhan
    Member
    Posted 1 year ago #

    @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 http://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.

  6. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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:

    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.

  7. Harish Chouhan
    Member
    Posted 1 year ago #

    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.

  8. Harish Chouhan
    Member
    Posted 1 year ago #

    Hello Jeremy,

    I apologize to mark this post as unresolved again.

    I wanted to know this:

    Please visit http://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

  9. Harish Chouhan
    Member
    Posted 1 year ago #

    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="http://i1.wp.com/flattrendz.com/wp-content/uploads/wrightfeldhusen.jpg?fit=1400%2C9999&crop=250px%2C0%2C900px%2C600px&resize=900%2C600">

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

  10. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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:
    http://developer.wordpress.com/docs/photon/api/

  11. Harish Chouhan
    Member
    Posted 1 year ago #

    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.

  12. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic