Jetpack

How to add a default fallback image if no image can be found in a post

When you publish a new post on your site, Jetpack crawls it and looks for images that can be used when sharing that post on Facebook, on Twitter, or if that post appears in the Top Posts and Pages widget in your sidebar.

Jetpack starts by looking for a Featured Image. If you didn’t define any, we will look for slideshows and galleries, and then for single images you may have inserted in your posts. If you’ve inserted an image that is hosted on another site, we can use it too.

However, sometimes you may not have added any image to your post. In such cases, you can add this code snippet to your theme’s functions.php file, or in a functionality plugin. This way, your readers will see a default image when sharing that post on Facebook, for example:

function jeherve_custom_image( $media, $post_id, $args ) {
	if ( $media ) {
		return $media;
	} else {
		$permalink = get_permalink( $post_id );
		$url = apply_filters( 'jetpack_photon_url', 'YOUR_LOGO_IMG_URL' );
	
		return array( array(
			'type'	=> 'image',
			'from'	=> 'custom_fallback',
			'src'	=> esc_url( $url ),
			'href'	=> $permalink,
		) );
	}
}
add_filter( 'jetpack_images_get_images', 'jeherve_custom_image', 10, 3 );

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.

Reference

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

Ever accidentally publicize a post that you didn’t mean to?

Ever accidentally publicize a post that you didn’t mean to? This snippet will prevent the connections from being auto-selected, so you need to manually select them if you’d like to publicize something.

add_filter( 'publicize_checkbox_default', '__return_false' );

You can place this code snippet in your theme’s functions.php file, or in a functionality plugin.

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

How to disable the auto-activation of a Jetpack module

In Jetpack 2.6, we will introduce a new filter, jetpack_get_default_modules. It will allow you to stop the auto-activation of a specific Jetpack module.

Here is an example with the Widget Visibility module:

// To disable the auto-activation of Jetpack's Widget Visibility module:
add_filter( 'jetpack_get_default_modules', 'disable_jetpack_widget_visibility_autoactivate' );
function disable_jetpack_widget_visibility_autoactivate( $modules ) {
	return array_diff( $modules, array( 'widget-visibility' ) );
}

// Or, to disable the functionality in your own plugin if the user activates it in Jetpack:
if ( ! class_exists( 'Jetpack' ) || ! Jetpack::is_module_active( 'widget-visibility' ) ) {
	// It's not there, do as you like!
}

Reference.

If you wanted all Jetpack modules to be deactivated by default, you could use the following code:

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

How to load only a specific Jetpack module

Sometimes you do not want to see a specific module in the Jetpack menu. You might not use it at all, or you might want to make sure other admins can’t activate it.

For such cases, you can use the jetpack_get_available_modules filter to control the list of modules available in Jetpack.

Load only a specific Jetpack module

function tweakjp_only_stats ( $modules ) {
    $return = array();
    $return['stats'] = $modules['stats'];
    return $return;
}
add_filter( 'jetpack_get_available_modules', 'tweakjp_only_stats' );

Disable a specific module

function tweakjp_disable_stats ( $modules ) {
    unset( $modules['stats'] );
    return $modules;
}
add_filter( 'jetpack_get_available_modules', 'tweakjp_disable_stats' );
Posted in Code snippets, Tips & Tricks | Tagged , , , | Comments Off

How to change the size of the thumbnails in the Top Posts widget

The Top Posts widget offers different options to display a list of posts, or a grid of post thumbnails. In some cases, you might want to change the size of the thumbnails used by this widget.

To do so, you’ll need to change the size parameters in the image source, by adding the following code to your theme’s functions.php file, or to a functionality plugin:

function jeherve_custom_thumb_size( $get_image_options ) {
        $get_image_options['avatar_size'] = 600;

        return $get_image_options;
}
add_filter( 'jetpack_top_posts_widget_image_options', 'jeherve_custom_thumb_size' );

You can add some custom CSS to overwrite Jetpack’s default CSS. You can paste this CSS in yor theme’s stylesheet, or under Appearance > Edit CSS in your dashboard:

.widget_top-posts .widgets-list-layout-blavatar {
    max-width: 600px;
}
Posted in Code snippets, Tips & Tricks | Tagged , | Comments Off

Automatically close comments in the Carousel view

You can use the following code to automatically close comments in the Carousel view, based on the number of days you’ve defined in Settings > Discussion:

function jpcarousel_auto_close_comments( $open, $post_id ) {
	$post = get_post( $post_id );

	$days_old = (int) get_option( 'close_comments_days_old' );

	if ( ! $days_old )
		return $open;

	if( $post->post_type == 'attachment' && time() - strtotime( $post->post_date_gmt ) > ( $days_old * DAY_IN_SECONDS ) ) {
		return false;
	}
	return $open;
}
add_filter( 'comments_open', 'jpcarousel_auto_close_comments', 10 , 2 );
Posted in Code snippets, Tips & Tricks | Tagged , | Comments Off

Remove Jetpack Sharing buttons in the Mobile Theme

You can add the following code to a functionality plugin to remove the Jetpack Sharing buttons in the Mobile Theme:

// Check if we are on mobile
function jetpackme_is_mobile() {

    // Are Jetpack Mobile functions available?
    if ( ! function_exists( 'jetpack_is_mobile' ) )
        return false;

    // Is Mobile theme showing?
    if ( isset( $_COOKIE['akm_mobile'] ) && $_COOKIE['akm_mobile'] == 'false' )
        return false;

    return jetpack_is_mobile();
}

// Let's remove the sharing buttons, but only if we're on a mobile device
function jetpackme_maybe_add_filter() {

    // On mobile, and on the home page?
    if ( jetpackme_is_mobile() ) {
        remove_filter( 'the_content', 'sharing_display', 19 );
		remove_filter( 'the_excerpt', 'sharing_display', 19 );
    }
}
add_action( 'wp_head', 'jetpackme_maybe_add_filter' );

// Build the function
function jptweak_remove_share() {
	remove_filter( 'the_content', 'sharing_display', 19 );
	remove_filter( 'the_excerpt', 'sharing_display', 19 );
}

Looking for more mobile tips? You’ll find them here!

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

How to disable specific shortcodes in Jetpack

Jetpack includes many shortcodes allowing you to embed videos, audio files, images, and other media into your posts.

If you want to deactivate a specific shortcode without deactivating the Shortcodes module, you can add the following code to your theme’s functions.php file, or to a functionality plugin:

function my_remove_shortcode_function( $shortcodes ) {
	$jetpack_shortcodes_dir = WP_CONTENT_DIR . '/plugins/jetpack/modules/shortcodes/';
	
	$shortcodes_to_unload = array( 'ted.php', 'soundcloud.php', );

	foreach ( $shortcodes_to_unload as $shortcode ) {
		if ( $key = array_search( $jetpack_shortcodes_dir . $shortcode, $shortcodes ) ) {
			unset( $shortcodes[$key] );
		}
	}
		
	return $shortcodes;
}
add_filter( 'jetpack_shortcodes_to_include', 'my_remove_shortcode_function' );

In the code above, you’ll need to add to or remove shortcodes from the $shortcodes_to_unload array. It requires the file name of the shortcode you want to deactivate.

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

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
Follow

Get every new post delivered to your Inbox.

Join 61,538 other followers