Modify WordPress Image URL to add Query Parameters

If you are wondering, how to modify WordPress Image URL and add Query Parameter, you are not alone. I asked myself the Question when using the image Optimization Plugin Gumlet. I was using a theme back in the days, which was showing some square images on the Homepage. The Problem was, I had disabled thumbnails on WordPress Completely to save some inode count on my SiteGround account, and just wanted to use Gumlet Image Query Parameters to serve a cropped, square image.

This was quite challenging and by the way I am not using this theme anymore, but I wanted to give you guys the function in case someone needs to add Query Parameters to WordPress Images to. By the way, here is another interesting guide on how to automatically remove default image links in WordPress.

via GIPHY

The Problem i had

Just want to explain the Problem I had once again, so you don’t feel like Peter up there 👆 and it is clear what I am trying to achieve before we get to the solution:

  • I disabled the WordPress Thumbnails
  • My theme was trying to load a cropped, square thumbnail
  • This thumbnail didn’t exist, so it was using a normal widescreen image
  • The site looked terrible, because the images were way too small

How i solved it

I wanted to use the some Gumlet CDN API parameters for cropping the images.

For example, everything including the questionmark would be some custom query string URL variables:

https://demo.gumlet.com/lemon.jpeg?compress=true&quality=80&w=150&h=150&mode=crop&crop=smartCode language: JavaScript (javascript)

This image Optimization CDN has, as most of them do, some query parameters which you could add to the end of the Image URL. The CDN will then detect the parameters and act accordingly, in this example cropping the image in smart mode, setting it to 150px size and compress it with quality set to 80%.

YOU MIGHT ALSO LIKE:
Remove WordPress Image Links and Fix "resources are formatted as page link"

But of course you can use this function with other optimization CDNs than Gumlet, or for all kind of other image parameters. You just have to know what you want to append to the URL and you are good to go 😎

The only Question left was, how to determine when the parameters should be added? This was quite easy, because the Theme (Extra by Elegant Themes) was registering some thumbnail sizes for the square images. Even through I had disabled thumbnails, the theme files still were calling for these specific thumbnail sizes (extra-image-square-small and extra-image-square-medium). Of course, I could have just used regex, but I wanted a performant solution… Not a buggy one 😉

The Function for adding Query Strings to WordPress Images

/** Gumlet Parameter for altering IMG SRC for Specific thumbnail sizes **/
function wpzeus_appendImageSRC($image, $attachment_id, $size, $icon) {        
    if (isset($size) && $size === 'extra-image-square-small') {

        $image[] .= '?compress=true&quality=80&w=150&h=150&mode=crop&crop=smart';

    } else if (isset($size) && $size === 'extra-image-square-medium') {

        $image[] .= '?compress=true&quality=80&w=440&h=440&mode=crop&crop=smart';

    }

    return $image;
}

add_filter('wp_get_attachment_image_src', 'wpzeus_appendImageSRC', 10, 4);Code language: PHP (php)

Just a few lines of code, but be sure this took me a few hours 😅

As you can see, i am using if clauses to check if the thumbnail size used is one of the cropped ones. If this is true, then i just add the query parameters to the img src url and Gumlet will do the cropping and sizing as a result 🤘

By the way, if the function above works for you or not depends mostly on your theme and the technique (or function, in this case the wp_get_attachment_image_src) it uses to retrieve images. For Example, in a vanilla WordPress Setup this function for wp_get_attachment_image_attributes works:

function wpzeus_appendImageSRC_Vanilla($attr, $attachment, $size) {

    if ($size === 'extra-image-square-small') {

        $attr['src'] .= '?compress=true&quality=80&w=150&h=150&mode=crop&crop=smart';

    } else if ($size === 'extra-image-square-medium') {

        $attr['src'] .= '?compress=true&quality=80&w=440&h=440&mode=crop&crop=smart';

    }

    return $attr;

}

add_filter('wp_get_attachment_image_attributes', 'wpzeus_appendImageSRC_Vanilla', 999 , 3);Code language: PHP (php)

So, depending on your setup, you might need to use another filter 😉

YOU MIGHT ALSO LIKE:
How to add WordPress Footnotes the easy way

The main Idea on how to write the function, I got from another article. In case some needs it, here is the link: https://wpquestions.com/Extent_the_post_thumbnail_function_with_a_third_parameter/27795

We love 💚 Feedback, so if you have a questions left or it didn’t work for you, feel free to drop us a comment 👇

Leave a Comment

Send this to a friend