Use Jetpack’s Photon image resizing in local development

In order to dynamically resize an image, Photon needs to be able to fetch the image file over HTTP. Jetpack disables Photon when JETPACK_DEV_DEBUG is defined because the assumption is that your local development domain isn’t accessible from the public internet. But, if you configure Photon in your local environment, you can tell Jetpack to enable all of Photon’s features too.

Setup Photon

First, check out the Photon codebase to a location served by your VIP Quickstart or Salty WordPress Vagrant:

svn co https://code.svn.wordpress.org/photon/ photon.dev

You’ll need to set up a record within your web server (Nginx or Apache) to serve the domain. If you aren’t using dnsmasq for local development, you’ll need to edit /etc/hosts on your local machine too.

Install Gmagick

You probably don’t have Gmagick installed, which Photon uses to resize images, so you’ll need to install it. For me, this was:

apt-get install php5.6-gmagick
service php5.6-fpm restart

Add a couple of filters

The last step is to add a couple of filters to a local mu-plugin or similar:

add_action( 'jetpack_modules_loaded', function(){
include( Jetpack::get_module_path( 'photon' ) );
add_filter( 'jetpack_photon_development_mode', '__return_false' );
}, 11 );

add_filter( 'jetpack_photon_domain', function( $domain ){
return 'http://photon.dev';
});