How to use Photon to serve custom cropped Post thumbnails

The Photon module resizes your site’s images on the fly, without cropping them. However, in some cases you might want Photon to apply a custom cropping when resizing certain images.

In the following example, we will use photon to serve Post thumbnails with custom cropping, and use a different cropping on single pages:

if( function_exists( 'jetpack_photon_url' ) ) {
    add_filter( 'jetpack_photon_url', 'jetpack_photon_url', 10, 3 );
}
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
	$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' );

Reference

Posted in Code snippets, Tips & Tricks | Tagged , | Comments Off

How to add a custom Open Graph image tag to your home page

When you share a post on Facebook, or when Jetpack Publicize publishes a post to your Facebook page, Facebook crawls the page and looks for Open Graph meta tags to build a complete post preview (with an image, title, description, …).

Jetpack automatically creates these meta tags for you, so you don’t have to worry about it!

However, Jetpack doesn’t create any image meta tag for your home page.
If you want to add your own custom image meta tag there, you can add this code to your theme’s functions.php file, or to a functionality plugin:

function fb_home_image( $tags ) {
	if ( is_home() || is_front_page() ) {
		// Remove the default blank image added by Jetpack
		unset( $tags['og:image'] );

		$fb_home_img = 'YOUR_IMAGE_URL';
		$tags['og:image'] = esc_url( $fb_home_img );
	}
	return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'fb_home_image' );

It’s worth noting that the fallback image has to be larger than 200 x 200px, as per Facebook requirements. If your image is smaller, Facebook will ignore it.

Posted in Code snippets, Tips & Tricks | Tagged , | 1 Comment

Add Infinite Scroll to search result pages

By default, Infinite Scroll is only active on your site’s home page as well as on the archive pages. You can, however, use the infinite_scroll_archive_supported filter to add support to other pages:

function tweakjp_custom_is_support() {
	$supported = current_theme_supports( 'infinite-scroll' ) && ( is_home() || is_archive() || is_search() );
	
	return $supported;
}
add_filter( 'infinite_scroll_archive_supported', 'tweakjp_custom_is_support' );
Posted in Code snippets, Tips & Tricks | Tagged , , | Comments Off

How to insert another plugin before the Jetpack sharing buttons

Jetpack sharing buttons are added immediately after the post content. In some cases, you may want to insert a new element between your post content and the sharing buttons.

To control whether that element will appear before or after the Jetpack sharing buttons, you will have to change the priority of the filter. In the example below, we’ve added an author box and used the priority 18. As long as the priority is less than 19, it will appear before the sharing buttons.

Posted in Code snippets, Tips & Tricks | Tagged | Comments Off

How to use your own resources in the sharing module

The sharing module includes an “advanced” option, allowing you to use your own Javascript and CSS files instead of the files added by Jetpack by default.

To get started, go to Settings > Sharing in your dashboard, and check the “Advanced” checkbox at the bottom of the page.

Then, you can add your own libraries by adding the following code in a functionality plugin or in your theme’s functions.php file:

function tweakjp_add_sharing_js() {
    wp_enqueue_script( 'sharing-js', WP_SHARING_PLUGIN_URL . 'sharing.js', array( ), 3 );
}
add_action( 'wp_enqueue_scripts', 'tweakjp_add_sharing_js' );

function tweakjp_add_sharing_css() {
    wp_enqueue_style( 'sharing', WP_SHARING_PLUGIN_URL. 'sharing.css', false, JETPACK__VERSION );
}
add_action( 'wp_enqueue_scripts', 'tweakjp_add_sharing_css' );

Once you’ve checked the option, you will be able to manually enqueue your own sharing js and css files.

You’ll note that Jetpack uses the WP_SHARING_PLUGIN_URL constant to build the path to load the libraries. You will have to change that constant by your own when reenqueueing the sharing libraries.

Reference

Posted in Code snippets, Tips & Tricks | Tagged | Comments Off

Skip an Image with Photon

Once you activate the Photon module, it will automatically cache and serve all images you’ve added to your posts and pages that have been uploaded to your site.

You can exclude a specific image or an entire page from Photon easily.

To exclude an entire post or page from using Photon, you can modify this snippet to fit your needs and add it to your theme’s functions.php or a core functionality plugin:

function no_photon_by_page() {
  if ( is_page( 2 ) ) {
    add_filter( 'jetpack_photon_skip_image', '__return_true');
  }
}

add_action('wp', 'no_photon_by_page');

In this example, Photon won’t be used on the page with the ID of 2, but you can use any of the WordPress Conditional Functions.

If you’d like to exclude an image from being cached and served by Photon, you can add the following code to your theme’s functions.php file:

function my_photon_exception( $val, $src, $tag ) {
        if ( $src == 'YOUR_IMAGE_URL' ) {
                return true;
        }
        return $val;
}
add_filter( 'jetpack_photon_skip_image', 'my_photon_exception', 10, 3 );

If you’d like to disable Photon in other specific situations instead, you can check this tutorial.

Posted in Code snippets, Tips & Tricks | Tagged | Comments Off

How to remove Publicize options from the New Post screen

Publicize adds a set of options right above the “Publish” button in your dashboard. You can hide these options by adding the following code to a functionality plugin, or to your theme’s functions.php:

// Replace with admin_head-post.php for the edit post screen
add_action( 'admin_head-post-new.php', function() {
        global $publicize_ui;
        remove_action( 'post_submitbox_misc_actions', array( $publicize_ui, 'post_page_metabox' ) );
} );

Reference

Posted in Code snippets, Tips & Tricks | Tagged | Comments Off

Remove Jetpack’s Open Graph meta tags

If you’ve activated the Sharing or Publicize module, Jetpack will automatically add Open Graph meta tags to each one of your posts. These tags are used by Facebook to gather information about the post and build a post preview when one of your readers shares a post on Facebook.

If you already use another plugin to handle Open Graph meta tags on your site, we’ll automatically deactivate Jetpack’s Open Graph meta tags for you, to avoid any duplicates.

If, however, you’ve added these tags to your theme or built your own plugin, you’ll want to add the following code to your theme’s functions.php file or to your plugin, to deactivate Jetpack’s Open Graph meta tags:

add_filter( 'jetpack_enable_open_graph', '__return_false' );
Posted in Code snippets, Tips & Tricks | Tagged , , , | Comments Off

How to remove the comment form from Carousel View

Sometimes, you may not want your readers to comment on single images. If that’s the case, you can deactivate comments on all attachment pages and in the Carousel view by adding this code snippet to your theme’s functions.php file:

function tweakjp_rm_comments_att( $open, $post_id ) {
    $post = get_post( $post_id );
    if( $post->post_type == 'attachment' ) {
        return false;
    }
    return $open;
}
add_filter( 'comments_open', 'tweakjp_rm_comments_att', 10 , 2 );
Posted in Code snippets, Tips & Tricks | Tagged | Comments Off

Adding reCaptcha to the Email Sharing Button

How do I add reCaptcha to the Email button

The Email button is great, and you can make it even better by adding a Captcha to the submission form:

reCaptcha for Jetpack

To add the Captcha to your site, follow these steps:

  1. Start by registering on this site. Upon registration, you will receive a Public and a Private key.
  2. Open your site’s wp-config.php file in your favorite text editor, and add the following constants with both reCaptcha keys right before /* That's all, stop editing! Happy blogging. */:
    define( 'RECAPTCHA_PUBLIC_KEY', 'XXXXXXX' );
    define( 'RECAPTCHA_PRIVATE_KEY', 'XXXXXXX' );
    
  3. Voila! Your email sharing buttons are now protected against spammers!
Posted in Code snippets, Tips & Tricks | Tagged , , , | 1 Comment
Follow

Get every new post delivered to your Inbox.

Join 58,154 other followers