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 any images that may be attached to the post. If we don’t find any image attached to that post, we’ll look for single images you may have inserted in the post. 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 on How to add a default fallback image if no image can be found in a post

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

Note: Publicize is now auto-share and is part of Jetpack Social.

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.

<br>
add_filter( 'publicize_checkbox_default', '__return_false' );<br>

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 add JavaScript events to the Carousel view

Add this to your site’s js to enable events such as adding Google Analytics tracking code to individual Carousel slides:

jQuery(document).on( 'jp_carousel.selectSlide', '.jp-carousel-wrap', function( event, slides ) {
	// This is just to show you what values get passed in.  Delete it before going to production.
	if ( window.console ) {
		console.log( this );
		console.log( event );
		console.log( slides );
		console.log( slides[0] );
	}
	// Do whatever extra stuff you want here.
} );

You can read more about it here.

Posted in Code snippets, Tips & Tricks | Tagged , , | Comments Off on How to add JavaScript events to the Carousel view

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 on How to disable the auto-activation of a Jetpack module

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 on How to load only a specific Jetpack module

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' );

To change the thumbnail size, you will also need to add some custom CSS to overwrite Jetpack’s default CSS. You can paste this CSS in your theme’s stylesheet, or under Appearance > Edit CSS in your dashboard:

.widget_top-posts .widgets-list-layout li > a {
    width: 40%;
} 

.widget_top-posts .widgets-list-layout img.widgets-list-layout-blavatar {
    max-width: 240px;
    width: 100%;
}

.widget_top-posts .widgets-list-layout div.widgets-list-layout-links {
    max-width: 100%;
    width: 55%;
}

@media only screen and (max-width: 1019px) {

    .widget_top-posts ul.widgets-list-layout {
        max-width: 600px;
        margin: 0 auto;
    } 

    .widget_top-posts .widgets-list-layout div.widgets-list-layout-links {
        font-size: 24px;
    }
}
Posted in Code snippets, Tips & Tricks | Comments Off on How to change the size of the thumbnails in the Top Posts widget

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 on Automatically close comments in the Carousel view

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 on Remove Jetpack Sharing buttons in the Mobile Theme

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 a functionality plugin. Please note that this will not work in a theme’s functions.php file due to the order in which WordPress loads plugins and themes and how we’re loading the shortcodes list.

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 on How to disable specific shortcodes in Jetpack

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 on How to use Photon to serve custom cropped Post thumbnails
  • Enter your email address to follow this blog and receive news and updates from Jetpack!

    Join 112.3K other subscribers
  • Browse by Topic