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

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!

Jetpack will also add an Image meta tag to your home page if you use a Site Logo, or a Site Icon. If you don’t use any of these 2 options, you might want to add your own custom image meta tag there. To do so, add one of the following code snippets 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' );

Alternatively, you can change the default image used any time Jetpack can not determine an image to use:

function custom_jetpack_default_image() {
	return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_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

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 on Remove Jetpack’s Open Graph meta tags
  • Recent Comments

    Jeremy on Jetpack 4.3 and 4.3.1: A faste…
    iamjohnwhite on Jetpack 4.3 and 4.3.1: A faste…
    Guilherme Cardoso on Jetpack 4.3 and 4.3.1: A faste…
    Jeremy on Jetpack 4.3 and 4.3.1: A faste…
    Jeremy on Jetpack 4.3 and 4.3.1: A faste…
  • Archives

  • Enter your email address to follow this blog and receive notifications of new posts by email.

  • Install Jetpack to see our lineup of features.

    Install Jetpack Now

    Don’t need all Jetpack’s features? No problem. Only activate what you need!