Plugin doesn’t work with Photon activated

Hey there! I work on the Jetpack team; @kevinmamaqi I’ve just replied to your email. I’ll also post my reply to you here, as it could be useful for others in the future.

If it mirrors your website like a modern CDN there is no problem. If it sends the images over manually to a remote server, then it might not work

@tigroumeow I’ll go over how Jetpack and its Photon service below. Hopefully it clarifies things a bit. Before I do that, I wanted to address your other comment.

since it is JetPack, you can be sure they will never fix it or do something for compatibility with another plugin 🙁

It seems you’ve had some bad experiences with Jetpack in the past. Sorry about that! We do actually listen to our users, and do attempt to fix any conflicts we know about, or work with fellow plugin authors to find a solution. A quick look at our changelog (look for the “compatibility” word) should give you some examples. We even include a /3rd-party/ folder in Jetpack (see here), and include some specific compatibility fixes there.

That said, we need to know about a conflict in order to work on it. So if you ever find a conflict between Jetpack and another plugin, please let us know!

Thanks! 🙂

Now back to our original problem.

If it mirrors your website like a modern CDN there is no problem. If it sends the images over manually to a remote server, then it might not work

The Photon service is a bit more than a CDN. It also includes an API that we leverage in the Jetpack plugin to deliver different images depending on what a browser or site needs.

In practice, when the Photon module is active, each original image inserted into a post or page is downloaded to our servers, optimized, cached, and multiple versions of that image are created and cached; for each requested size, contrast, pixel density a site may need, a new version of the image is created, and then served via our CDN. Back on the site, the original image URL is replaced by a Photon image.

One of the options of the API is a zoom parameter, that can be used to generate different images depending on the device used to browse the site.

You can see it in action on the site here:

• When visiting from a non-Retina device: https://i.jeremy.hu/without-retina.png
• When visiting from a Retina device (a Macbook Pro Retina in this case): https://i.jeremy.hu/with-retina.png

As you can see, a zoom parameter was added to the image URL to handle the device’s pixel density.

You can check what the zoom parameter does by loading an image directly:

• Without the Zoom parameter:
  https://i1.wp.com/kmdevs.com/wp-content/uploads/2017/01/Guerrilla-Beat.jpg?w=316&ssl=1
• With the zoom parameter:
  https://i1.wp.com/kmdevs.com/wp-content/uploads/2017/01/Guerrilla-Beat.jpg?zoom=2&w=316&ssl=1

As you can see, although the requested image size was the same (361px), Photon actually returned a bigger image to match the device’s pixel density. If you had requested that image from another HiDPi with a different pixel density (like a recent Android phone for example), you would have gotten a third image size:
https://i1.wp.com/kmdevs.com/wp-content/uploads/2017/01/Guerrilla-Beat.jpg?zoom=1.5&w=316&ssl=1

The zoom parameter is applied to the images on your site right now, but it doesn’t do much to the images in the “Trabajos” grid on your home page, as your theme (or the builder you used to generate that grid) actually loads the full image there without specifying an image size.

In practice, that means that you don’t need to use any additional plugin to handle Retina and HiDPi devices when you use Photon and Jetpack.

The bad news is, Jetpack and Photon are indeed incompatible with the WP Retina 2x plugin. Photon generates images based off the original image you included in your posts or pages. It won’t know of any alternative image sizes, like the “@2x” the plugin creates.

You consequently have 2 solutions:

1. You can deactivate the Photon module in Jetpack. @tigroumeow If you’d like, you could decide to programatically do this for all the users of your plugin, either right away when they enable your plugin or after clicking a link in a notice you’d generate. I would personally recommend that you let them know about the change so they’re not surprised about what’s happening.
2. You can deactivate the WP Retina 2x plugin and rely on Jetpack and Photon. That means you’ll want to upload large images and use those in your posts; Jetpack and Photon will take care of the resizing for you.

I hope this clarifies things a bit.

@tigroumeow Here is a quick proof of concept to show you how you could implement this in your plugin:

/**
 * Deactivate the Photon module if it is active.
 *
 * @see https://wordpress.org/support/topic/plugin-doesnt-work-with-photon-activated/
 */
function jeherve_deactivate_photon() {
        // Is Jetpack active, and is Photon enabled?
        if ( class_exists( 'Jetpack' ) && Jetpack::is_module_active( 'photon' ) ) {
                // Deactivate the module.
                Jetpack::deactivate_module( 'photon' );
                // Remove the module from the module list in Jetpack options, so it cannot be enabled back.
                add_filter( 'jetpack_get_available_modules', 'jeherve_photon_not_available' );
        }
}
add_action( 'init', 'jeherve_deactivate_photon' );

/**
 * Remove the Photon module from the module list in Jetpack options, so it cannot be enabled back.
 *
 * @param array $modules Array of available modules.
 * @param string $min_version Minimum version number required to use modules.
 * @param string $max_version Maximum version number required to use modules.
 */
function jeherve_photon_not_available( $modules, $min_version, $max_version ) {
        unset( $modules['photon'] );
        return $modules;
}

• This reply was modified 7 years, 2 months ago by Jeremy Herve.
• This reply was modified 7 years, 2 months ago by Jeremy Herve.