Lossy Image Compression with Photon

If you were watching closely, you may have noticed that we recently introduced the option for lossy JPEG compression with Photon. The new parameters are quality and strip. Quality is pretty straight forward — the image quality out of 100. Strip refers to meta data that can be stripped from an image — namely exif and color data. It accepts exif, color, or all for both.

For example: https://developer.files.wordpress.com/2015/02/dsc01921.jpg?w=780&quality=80&strip=all

You can drop a snippet like this in a plugin to set the quality and strip parameters for every image on the site.

add_filter('jetpack_photon_pre_args', 'jetpackme_custom_photon_compression' );
function jetpackme_custom_photon_compression( $args ) {
    $args['quality'] = 80;
    $args['strip'] = 'all';
    return $args;

The results can be pretty dramatic. At full size, this image of downtown Madison goes from 16MB to 2.7MB by setting the quality to 80%. That’s a big deal on a mobile connection and it’s pretty hard to spot the difference on most images unless you’re looking at them side by side.


Developer Plugin 1.2.2 Released: New WP-CLI Command

Version 1.2.2 of the Developer plugin was recently released. The big feature of this release is a new WP-CLI command. If you’re not familiar with WP-CLI, it is “a set of command-line tools for managing WordPress installations.” These command-line tools let you do anything from download and install WordPress to manage options for your site. The command we’ve introduced will let you install and, optionally, activate the recommended plugins.

For example, the following will install and activate the Developer plugin and all the recommended plugins for WordPress.com VIP.

wp plugin install developer --activate
wp developer install-plugins --type=wpcom-vip --activate

As always, pull requests are welcome on Github. If you want to introduce a new WP-CLI subcommand or just stay up to date with the latest on the Developer plugin, join us there.

New P2 Plugin: P2 Hovercards

We’ve released a new plugin for the P2 theme that we’re calling P2 Hovercards. Hovercards are like extra bits of information about particular links that show up when you hover the corresponding inline link or object (for example, check out our Gravatar Hovercards).

With this plugin you can add hovercards to your self-hosted P2 sites. A good example of this is core trac tickets. If you look at the Make WordPress Core blog, you’ll notice that tagged Core Trac tickets are automatically linked up. So, something like #12345 links to http://core.trac.wordpress.org/ticket/12345.

With P2 Hovercards, we took this a step further. I can set it so that #12345 links to the right place, but then also show some additional information when you hover over the link. The following image is an example of what a hovercard could look like for that ticket:

You’ll notice that it gives all the necessary details about the ticket: description, recent comments, and related metadata like owner, status, and so on.

You can extend hovercards, of course, and use them for whatever service you want with a bit of code. Internally, we’re using the plugin to add details to links to support tickets, for example.

The plugin comes with a handy p2_hovercards_add_services() function for adding services:

if (function_exists( 'p2_hovercards_add_service' )
	p2_hovercards_add_service( $service, $pattern, $url, $ticket, $callback );

(Note: We recommend creating a child theme of P2 and adding the additional code to your functions.php file.)

Here’s a quick breakdown of the arguments:

  • $service is a string that is the name or slug of the service being added.
  • $pattern is a string that is the regex pattern for finding and linking up tags. For our Core Trac ticket example, you would use $pattern = '#(\d+)'
  • $url is a string that contains the regex replacement for the anchor tag that gets generated. Again, for the core trac ticket example, you would use $url = '<a href="http://core.trac.wordpress.org/ticket/$1">$0</a>'
  • $ticket is a string that contains the regex replacement for a ticket. Following the same example, you would use $ticket = '$1'
  • $callback is a callback function for generating the hovercard

The most basic callback looks something like this:

function core_trac_callback( $args ) {
	$id = (int) $args[ 'id' ];
	$url = esc_url( $args[ 'url' ] );
	$service = esc_attr( $args[ 'service' ] );

	// Do stuff with $id, $service, and $url

	return compact( 'title', 'subtitle', 'url', 'description', 'comments', 'meta' );

The first four things in the array ($title$subtitle$url, and $description) are just strings that will be displayed in the appropriate place on the card. The last two are a little more customizable depending what you want to do though.

Comments are stored in a 2-dimensional array with author, date, and comment fields. Meta is displayed as “Key: Value” in the black bar at the bottom of the hovercard.

More in-depth examples can be found in the examples.php file in the Github repository. As always, we invite you to join us on Github; pull requests and issues are always welcome.