I use Jetpack on most of my WordPress websites, because it has some really great features, many of them free. I still can’t believe that Automattic gives away a CDN (content distribution network). If you don’t know what that is, it is a way of hosting static files like images, javascript, and css and the like separate from your dynamic content, which is generated on the fly with code (PHP) and a database (MySQL). In particular, files hosted on a CDN are distributed in a number of data centers around the world, so that a visitor to your site from France will get their content from a server in Europe, while a visitor from Australia will get the content from a server in Asia. This means faster page load times.
The way that this works with Jetpack is that when you add an image to your site, a copy of that image is sent to the Jetpack servers, and a number of different versions of the image are created, in order to serve up the best image possible, depending on the type of browser your visitor is using. While JPEG images were the standard for many years, the WebP format offers better compression, and thus loads faster in many instances. The default for Jetpack is to serve WebP whenever possible. This is great in many cases, but I noticed recently that if I try to download an image from my site, I get a WebP format instead of a JPEG format, even though the url says jpg in it. This is not really what I wanted, and in particular, it was very confusing for people like my mom, who like to download images from our family blog and print them out. WebP is not supported by most photo editing or printing programs. The only way I could figure out how to get around this was to add a bit of Javascript to hack my download urls. For example, when I use the Jetpack carousel to display galleries like on this picture – the “view full size” link would normally give me a WebP format. For my family website I am using a custom child theme from the 2017 theme. I added a little javascript file and load that from my functions.php file.
functions.js:
/* Photon is great, but when I want to download a full size image, I would rather download the original from my server, stored in jpg, and not in webp, so that I can then print it out */
jq2 = jQuery.noConflict();
jq2(function( $ ) {
// Code using $ as usual goes here; the actual jQuery object is jq2
$( 'body' ).on(
'click',
'a.jp-carousel-image-download',
function( event ) {
var photonHref = $( 'a.jp-carousel-image-download' ).attr( 'href' );
if ( 'undefined' !== typeof(photonHref ) ) {
var newHref = photonHref.replace( /i[0-9]+.wp\.com\//, '' ).replace( '-scaled', '' );
$( 'a.jp-carousel-image-download' ).attr( 'href', newHref );
}
}
);
});functions.php:
function wp_fedibblety_enqueue_scripts() {
wp_register_style(
'fedibblety2017',
get_stylesheet_directory_uri() . '/style.css' ,
array(),
filemtime( get_stylesheet_directory() . '/style.css' )
);
wp_enqueue_style( 'fedibblety2017' );
wp_register_script(
'fedibblety2017js',
get_stylesheet_directory_uri() . '/functions.js' ,
array(),
filemtime( get_stylesheet_directory() . '/functions.js' )
);
wp_enqueue_script('fedibblety2017js');
}I have the feeling that there are likely better ways to do this. Suggestions welcome :)