Set Custom Image Sizes in WordPress Plugin Jetpack Carousel Module

First and foremost, the WordPress plugin Jetpack is a really amazing plugin. They offer so much functionality and neat features for FREE. One of Jetpack’s freebie modules is the “carousel module”. This module basically replaces the core WordPress gallery, especially if you enable Jetpack’s “tiled gallery module”.

I’m currently in love with the mosaic tiled effect that Jetpack has to offer. I use it a lot. However, one of my frustrations is how Jetpack sets the default src of the images to the “full” size image. This would be the original image file you uploaded in your gallery. That means, if the original resolution is 3000 x 3000, then those are the dimensions that Jetpack uses for the src of each image. Note: Jetpack also respectfully utilizes src-set with each image.

The problem is that the way WordPress calculates images to be used in the src-set is based on the viewport of the browser. That means if you’re on a desktop, you’re going to be downloading the original 3000 x 3000 image file for each image in your gallery. You will notice this if you use developer tools in your web browser.

After investigating the hooks available in Jetpack, there’s no simple way to modify the image sizes used by the carousel module. Thankfully Jetpack utilizes core WordPress functionality. Which lead me to investigate the hooks available in WordPress core.

There are three filter hooks which are necessary to pull this off:

  1. wp_get_attachment_image_src
  2. wp_get_attachment_metadata
  3. wp_get_attachment_url

Given the Jetpack doesn’t provide a way to set custom image sizes in the carousel module; Please make a note that this is a very “hack-ish” approach. This would not be my ideal solution, but it works.

In every WordPress installation, you can safely and reliably count on 3 basic image sizes:

  1. full (Original uploaded file)
  2. medium (Resized file)
  3. large (Resized file)

Jetpack uses all of these image sizes with the carousel module. Again, you can see this if you use developer tools in your web browser. You will also notice this if you inspect the code in Jetpack’s carousel module. ./wp-content/plugins/jetpack/modules/carousel/jetpack-carousel.php specifically the function add_data_to_images().

Step 1 – Override Default Image Sizes With Custom Image Sizes

The first thing to do would be to override those three image sizes with your own custom image sizes.

Step 2 – Override Default Original Image Size

You would think that in step1 that this would have been taken care of, but apparently not. WordPress Core sets information about the “full size” image as meta data for the attachment object. So you need to override the meta data as well.

Step 3 – Override Original Image Size URL

You’d think between step1 and step2 that this would have been taken care of, but again… Apparently not! So thankfully there’s a hook available to do exactly this!

Step 4 – Optionally Conditionally Add Hooks

You will likely want to trigger this functionality only on the front-end of your website, and likely in a specific area of the front-end.

You could pretty easily control this behavior by hooking into template_redirect and specify a few conditional checks.

 

Conclusion

You’ll realize that I’ve used 3 custom image size handles:

  1. mbe-core-portrait-3-4-extra-large (Replaces: full – Original Image)
  2. mbe-core-portrait-3-4-large (Replaces: large – Resized Image)
  3. mbe-core-portrait-3-4-medium (Replaces: medium – Resized Image)

You’ll also probably notice that I’ve unhooked and rehooked my callback within the callback itself. This is due to the function recalling itself, or another function which may also trigger this function again. The purpose of this is to avoid infinite looping of code execution.

Like I said earlier, this is definitely a very “hack-ish” approach, but it does indeed accomplish the desired outcome.


Note: This will replace all occurrences of the default images sizes: full, large, and medium everywhere or within the scope of that entire page if you used templating conditions. This could possibly result in unexpected behavior elsewhere on your website. Use with caution!!!


I hope you enjoyed this article or found this information useful in WordPress development. Please comment with your thoughts! Thanks!!

Leave a Reply