Jetpack

How to improve your User Experience using Jetpack

Jetpack has a ton of features (more than 30) that help you improve your WordPress site or blog in many ways – both for yourself as administrator as well as for your readers. Today I’m going to focus on eight Jetpack features that you can use to improve the User Experience of your site so that visitors find it easier to navigate and stick around longer.

Performance and Stability

It can seem like a no-brainer but the absolute worst user experience when visiting a site is when the site doesn’t work at all or takes a long time to load. Jetpack comes with two must-have features that stop this from happening:

  1. Photon
    Turning on Photon means that all your images get automatically served to users from the WordPress.com content delivery network (CDN) which means faster images for your readers (and less load on your host). To turn it on all you have to do is go to the Jetpack page in your blog dashboard and click the Activate button for Photon. And if you’re a developer, you can also speed up your theme with Photon.

  2. Monitor
    All sites go down once in a while. It could be your database, your host, some rogue code – whatever the reason, your visitors don’t really care, they just want to see your stuff! Jetpack Monitor will keep tabs on your site, and alert you the moment that downtime is detected so that you hear it from us first.

 

Mobile Devices

If you keep tabs on your traffic you’ve probably noticed you’re getting more and more visitors browsing your site from a mobile device: smart phones and tables of all shapes and sizes. Jetpack provides two features that help you make the reading experience on these devices significantly better:

  1. Mobile theme
    Jetpack comes with a responsive theme that works instantly on all mobile browsers. It also comes with various options and settings that enable you to choose exactly how you’d like your mobile browsing experience to work.

  2. Custom CSS
    Jetpack’s Custom CSS feature lets you tweak your site’s appearance to your heart’s content in a way that doesn’t break your theme when an upgrade is released. In addition, you can also create custom CSS for your mobile theme, further refining your mobile experience.

 

Interaction

Finally the last set of features deal with enabling your visitors to interact with your site, content and the community in a smoother fashion:

  1. Likes
    This feature puts a “Like” button on your posts and is a way for people to show their appreciation for your content. Enabling it is a short two-step process.

  2. Related Posts
    This feature pulls relevant content from your blog to display at the bottom of your posts. If the feature is enabled, a section of related posts appears just underneath your Likes (if you’ve turned these on). Just activate the feature from your Jetpack dashboard to turn them on but you can also customize how they display.

  3. Infinite Scroll
    Infinite scroll simply means that when a visitor scrolls to the bottom of your posts page Jetpack will automatically load the next set of posts without requiring clicking on any buttons. Activating it is similar to “Related Posts” above but not every theme supports it.

  4. Jetpack Comments
    When someone reads an article on your site and wants to comment, they can now use one of their existing social networking accounts to post a comment. No longer do they need to create yet another account and profile! You can also customize how Jetpack Comments display.

 

That’s it! Eight Jetpack features that can help your visitors have a more pleasurable experience when visiting your site. If you’ve not used Jetpack before, read our step-by-step installation guide here to try it out for yourself.

If you are a Jetpack user already please tell us what you think in the comments and, if you’d like to get involved by writing a guest post about Jetpack get in touch!

Posted in Features, Tips & Tricks | Tagged , , , , , , , , , , | 13 Comments

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

Photon and Themes

Theme crafters often ask whether Photon — the free Image Content Delivery Network module in Jetpack — can be used to speed up page loads and save on bandwidth when delivering images from their themes. The short answer: Yes! Read on for the how-to.

(more…)

Posted in Features, Uncategorized | Tagged , , | 20 Comments

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

Jetpack 2.1: Tiled Galleries

Posting photo galleries on your WordPress blog is a fun way to share your experiences with the world, but do plain old thumbnail grids truly express your artistic side? No, they don’t. That’s why we’ve added tiled galleries to Jetpack.

Tiled galleries allow you to create beautiful photo mosaics for your blog posts. Just activate the Tiled Gallery module (and optionally set the tiled layout as the default) to create gorgeous galleries in seconds. Your friends will envy you, and your enemies will fear you.

You might be thinking, “Are tiled galleries the only new feature in Jetpack 2.1? If they are, that’s certainly understandable, because it’s an amazing addition to an already feature-rich plugin.” No, tiled galleries are not the only new feature; we’ve also added a slideshow mode for galleries. Just choose Slideshow from the Type dropdown when creating your gallery, and you’ll instantly have a dynamic photo display. Slideshows and tiled galleries both look amazing on mobile devices, and they both integrate seamlessly with the Carousel module.

In addition to giving you new ways to show off your photographs, we’ve spent a lot of time fixing bugs, too.  Photon, Infinite Scroll, Publicize, Sharing, and the Contact Form modules have all been given some TLC, and the Custom CSS editor has been updated. For a complete list of changes, see the changelog.

Update: Jetpack 2.1.1 has been released to fix a bug that was preventing updates from Jetpack 1.9.2 and older.

Posted in Releases | Tagged , , , , , , , | 73 Comments

Jetpack 2.0.3 Released

This release continues to refine Jetpack’s handling of images in Photon (our image accelerator) and enhances theme and plugin compatibility with Infinite Scroll.

Jetpack’s Custom CSS Editor also gets a major overhaul for this release. The editing experience is now more streamlined and supports Sass and LESS as alternatives to traditional CSS. Write your site’s styles in your preferred language, and Jetpack handles the rest.

Those are the highlights, but this release also fixes many other issues you reported. For a complete list of changes, see the official Jetpack Changelog.

The update will be available in your WordPress dashboard shortly. Alternatively, you can always download the latest version of Jetpack here at jetpack.me.

Remember these fixes are made possible by bug reports submitted by you (thanks!), so please contact support or post in the support forum if you need help.

Posted in Releases | Tagged , , | 3 Comments

Jetpack 2.0.1 Released

Today we released Jetpack 2.0.1 to correct various issues with Photon, Publicize, and Infinite Scroll. What did we fix?

Photon

  • Avoid distorting images that don’t have explicit width and height set, or that only have one dimension specified.
  • When images are linked to their full-size versions, also serve the full-size versions from the WordPress.com CDN.
  • If an image is already processed with Photon, don’t reprocess it.
  • Add support for the Lazy Load plugin.
  • Unbreak smilies. :)

Publicize

  • If a site has custom shortlink settings, use those rather than always using wp.me.
  • Disable the Publicize interface for any posts already publicized to reduce confusion.
  • Link to connected LinkedIn profiles on the connections screen.
  • Improve error handling.

Infinite Scroll

  • Child themes now support Infinite Scroll if the parent theme does.
  • Archives now properly load only posts that would be shown if Infinite Scroll wasn’t present.
  • Link to support documentation within the module when the active theme doesn’t support Infinite Scroll.

Those are the highlights, but we also fixed dozens of other issues reported by our users. For a complete list of changes, see the official Jetpack Changelog.

The update will be available in your WordPress dashboard shortly; alternatively, you can always download the latest version of Jetpack here at jetpack.me as well.

Remember to contact support or post in the support forum if you need help. These fixes are made possible by bug reports submitted by you and other users. Thanks for the help.

Posted in Releases | Tagged , , | 2 Comments

Jetpack 2.0: Publicize to Facebook, Twitter, LinkedIn, Tumblr; Post by Email; Photon; Infinite Scroll

The past nine releases of Jetpack have started to reveal our vision for next-generation features that will boost WordPress’ incredible success by making it more social, more connected, more mobile, and more customizable.

Over three million downloads later, we’re excited to report that the community has embraced this seemingly impossible vision for combining the best of hosted and non-hosted WordPress. This tenth release brings some of the most-asked-for features into the hands of millions of Jetpackers.

Publicize to Twitter, Facebook, LinkedIn, Tumblr…

You no longer have to jump through hoops and developer portals to connect your blog to your friends on your favorite social networks. Through Jetpack and your WordPress.com account, you can connect to each network with just a few clicks and broadcast to your audiences and followers across several networks, making WordPress your true digital hub. Activate Publicize from the main Jetpack page in your dashboard, then go to Settings → Sharing to add social sharing connections.

Post by Email

If you live in Gmail, Outlook, your BlackBerry, or just find it easiest to email on the go, you’ll love the new Post by Email feature. Email anything to your secret address — a photo, a video, a bunch of photos, an audio file, ten pages of single-spaced text — and we’ll figure out how to make it beautiful and put it on your blog literally within seconds after you send it. Combined with Publicize and the previously-released Subscriptions module, that post will go out to all your friends including ones that subscribe via email, completing the loop of email / blog nirvana. To set up your special address go to Users → Your Profile in your dashboard and click the “Enable Post By Email” button.

Photon Your Images

Have you ever switched themes to find that full-width images break out of the layout and no longer fit your theme? Are you frustrated that images on your blog take too long to load? Jetpack Photon fixes all of that by making the advanced image acceleration and image editing service from WordPress.com available to the broader WordPress community, essentially making every image a fully dynamic object that themes and plugins can transform to their heart’s content without killing your server. In fact, if you enable Photon, you will see your CPU and bandwidth usage plummet as images are served through the global WordPress.com cloud, meaning less load on your host and faster images for your users.

Infinite Scroll

Infinite Scroll brings the future of reading on the web to your website. Speed and performance are key, and Infinite Scroll loads new content quickly without a full-page refresh. Instead of the old way of navigating down a page — by scrolling and then clicking a link to get to the next page and waiting for the page to refresh — infinite scrolling pulls the next set of posts into view automatically when the reader approaches the bottom of the page. Your theme needs support for this to work. There are already several themes in the directory with Jetpack Infinite Scroll support and theme authors will find documentation for adding it to any theme on jetpack.me.

Onwards…

Jetpack 2.0 isn’t just about shiny new things, we’ve also fixed dozens of bugs and under-the-hood things to keep Jetpack one of the smoothest running, most secure, and most stable plugins out there.

I want to personally thank all of the members of the Jetpack community who have shared countless hours of testing, feedback, and criticism. Your thoughts and passion have made the plugin immeasurably better than it would have been otherwise, and rest assured we’re still listening closely to your feedback around better stats, module activation and deactivation, developer mode, translation, and documentation.

Posted in Features, Milestone, Releases | Tagged , , , , , , , , , | 90 Comments
Follow

Get every new post delivered to your Inbox.

Join 63,495 other followers