Resize WordPress Images On The Fly With Aqua Resizer

Resize WordPress Images On The Fly With Aqua Resizer

Aqua Resizer is a small little script to dynamically resize, crop and scale images uploaded through WordPress on the fly. It is native, meaning it uses WordPress built-in functions to automatically process the images.

If you’re a theme author, you know how troubling it is to resize images on WordPress. There are a few methods & scripts out there that provides this functionality. Timthumb for example, is one of the most popular scripts that is used by theme authors but have some drawbacks that forces authors to look for alternatives. There are also the “native” way of doing it using the add_image_size() function which leaves tonnes of unused images on the server. Additionally, Victor Teixeira came up with the vt_resize script that was then quickly adopted by WooThemes – unfortunately, its usability is quite limited and in some cases too complicated to use.

Aqua Resizer, while not claiming to be better than the above methods, provides easy, fast, secure, and in general efficient way to solve all your needs in handling image resizing in your WordPress themes.

Aqua Resizer Features:

- Completely native, using WordPress built-in functions
- Works both on multisite and single WordPress install
- Just feed in URL, instead of using attachment id and all those stuff
- Optional cropping
- Can crop an already cropped image
- Lightweight – can be minified down to only <>50 lines of codes!
- Cache images (duh)
- Completely open source

Sample usage:

<?php
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full'); //get img URL
$image = aq_resize( $img_url, 560, 310, true ); //resize & crop img
?>
<img src="<?php echo $image ?>" />

More usage instructions and examples can be found on Aqua Resizer’s Github Page.

Aqua Resizer was written by Syamil MJ, a WordPress theme developer from Kuala Lumpur, Malaysia. He also developed the Slightly Modded Options Framework which can be found on Github. Find out more about him at http://aquagraphite.com

View Script On Github
Syamil MJ
I'm an active WordPress theme & plugin developer from Malaysia. I love the sea and helping people in general. :)
Syamil MJ
Syamil MJ

Latest posts by Syamil MJ (see all)

This article has 46 comments
  1. Aidan Boyle says:

    Considering how many times I’ve had issues with timthumb, and have done the wordpress native code to handle the images, I understand how many images get stuck on the server. I’ve heard a lot of bad issues with the timthumb security so I strayed away from it for that exact reason.

    If this is native, then I’m definitely going to try it. Thanks for the post!

    1. AJ Clarke | WPExplorer says:

      Aqua Resizer does use native WP functions for image cropping. Another benefit, is that things like the WP cropping tool will work for your featured images ;)

      There isn’t any caching system though, so you might end up with extra images on your server if you change image sizes. However, it’s the same thing with the native wp add_image_size() function.

      I love aqua resizer!

      Admin
    2. Perfect BloggersTech says:

      Thanks for the tutorial ! It will surely help thousands

    1. AJ Clarke | WPExplorer says:

      Functions.php is fine or in it’s own file in your theme and then use require_once() in functions.php to load it.

      Admin
    1. AJ Clarke | WPExplorer says:

      Use 9999,9999 for each value when using the Aqua Resizer. Or don’t use it. Simply use get_post_thumbnail_url()

      Admin
    1. AJ Clarke | WPExplorer says:

      Set width to 9999 and give the height a specific value then set crop to false.

      Admin
  2. David Joan Hard says:

    Thanks AJ Clarke,
    How can implement aqua resizer use responsive design? I have try it but image crash

    1. AJ Clarke | WPExplorer says:

      There is no difference whether the design is responsive. Sounds like you might be misusing the script to begin with.

      Admin
  3. Willem says:

    Hi,

    I upload a lot of images to my WP site. WP makes the Thumbnail size, Medium size and Large size. This works fine. But the original file is also still in my image folder with the original size. I’m looking for a solution when I upload an image it will resize to a maximum width, so my orignal image is much smaller and I don’t have to manually resize every image before uploading.

    So for example. I upload an image with size 1900 x 1400. This will be stored by WP as original (which is way to big). Now I have to change this every time manually before upload the image to 1000 x 600 (for example) to make it smaller. This is a lot of work. Is this reziser script the solution for this problem?

    Kind regards,

    Willem

      1. Willem says:

        Thanks for the answer. And ‘on the fly’ means that after upload there is only one file saved on server and the rest visible on frontend is scaled at that moment? That is than (I think) the benefit of this script in comparison with WP itself who stores different images for that on the server?

        1. AJ Clarke | WPExplorer says:

          Yes and no. This script will crop it and save a version on your server. It’s must faster, secure and less resource-consuming to store a version on your server. If what you are looking is to minimize how many copies are saved on your server you want to go to Settings->Media and set your default thumbnail, medium, large sizes to 0 – this is what I do here on WPExplorer so that my images are not cropped and stored 3 extra times when uploaded to the site. Hope that tip helps ;)

          Admin
  4. Willem says:

    Thanks for the tip. Still ‘on the fly’ is not clear to me. In comparison with WP resize option does Aqua Resizer only ‘resize’ (same as crop?) it when it needs to be resized to show it on the frontend? And than, this resized/cropped image is also saved on server (like WP does with all images)… Hope to hear from you.

  5. vivinblack1 says:

    Everything is well going with this script, It’s re-size imges to what the size I want. I have set the same height width for image container that the size of image I want. What would happen if I set this container height width of smaller for responsive mobile design? suggest me how to achieve responsive design including this script.

  6. Moonwalker09 says:

    Thx for you tools. Just one question, granted it works well in a horizontal picture, but when it turns to the vertical ones, the picture can only be showed from bottom but cut at the half. For instance, i set width with 600 and height with 400, the horizontal picture can be cropped well but vertical ones can only be seen part of. In the other word, can i fix the x,y axis or positioning the actual coordinate when resize the vertical picture so that it won’t turn out with an inappropriate position ? Thanks a lot!

    1. AJ Clarke | WPExplorer says:

      Set the crop value to false. Example…. aq_resize(image_url, height, width, false) – this will make images resize as opposed to crop.

      Admin
  7. empe says:

    Hello bro,

    Firstly, let me thank you for this great script. We embed it in every theme we produce

    It works perfectly!

    Until today, i just installed wordpress multisite with subdomain function, and the script is not working good :(

    But when i tried with wordpress multisite with subfolder, it’s working.

    I believe it will bring extra improvement into your plugin.

    thank you

    1. AJ Clarke | WPExplorer says:

      It should work fine, we use it on subdomain multi-site at our AuthenticThemes demos. My guess is there is something messed up with the way you have your domain mapping setup. Also try updating your script, just incase.

      Admin
  8. Javier says:

    Hello

    It’s a nice script. But i have a problem. With little images (less dimesion that script make) it’s don’t return any image. Any ideas?

    1. AJ Clarke | WPExplorer says:

      This is how the new author setup the latest version. You can edit line 70 to “return $url;” instead of “return false”. Or something do something like this on the front end:

      $thumb = aq_resize( ... ); if ( !$thumb ) $thumb = $orig_src;
      
      Admin
  9. Anton says:

    I will try this out! One question though, is this safe? I’m thinking there might be a vulnerability when creating new images in the uploads folder. Or am i wrong?

    1. AJ Clarke | WPExplorer says:

      Completely safe, because it uses core WordPress functions. There aren’t any cached images being stored temporarily or any 3rd party scripts running.

      Admin
  10. DigitalAtlas says:

    I started using this script and it’s a real god-send especially when you deal with custom field image fields. But even for general purposes when a media library reaches a certain size, regenerating thumbnails for new sizes is a real pain.

  11. yoyo says:

    Hi Syamil MJ, thank you for this wonderful plug-in. I am using it in my blog, but I could not load my post thumbs. I de-bugged the problem and notice that “is_wp_error( $editor )” returned “true”. And that is the parts causing the problem. Does someone knows how to solve this problem? I am using wp 3.7

  12. Caleb says:

    Will this work for existing photos on the server? When it calls for img url is that only for images uploaded on the front end of WP? Basically we are looking for something that will resize all photos uploaded for portfolio gallery to the same size without actually cropping them. Thanks in advance for your reply.

    1. AJ Clarke | WPExplorer says:

      The images must be within the WP media library in order for them to crop (for security reasons).

      Admin
  13. Debajyoti says:

    This is great… But can it cause any memory issues if used on all pages on a sidebar for post thumbnails ?

    1. AJ Clarke | WPExplorer says:

      No. Once the images are cropped once they are in your uploads folder and don’t need to be cropped again.

      Admin
  14. Yuvraj Khavad says:

    Hi, Syamil MJ

    Thank you for share with us,,,,great work,,,,,I used this script in my 5 projects …it helpful me…Thanks again,,,

  15. Jens Mikkelsen says:

    Is there any tutorials for none skilled people on how to use this aqua crop script? It sounds really nice to me.

    1. AJ Clarke says:

      The script is intended for people developing themes/plugins, I can’t possibly see any situation where a non-developer would be using the script.

      Admin
  16. burhan says:

    Hi,

    Thanks “Aqua Resizer” a super plugin

    my problem animation gif image not work blank src=””

    Is there a solution to the problem?

    1. AJ Clarke says:

      I use a highly modified version of the script. All you need to do is add a little if statement into Aqua Resizer function to return the original width and height if it can’t be resized. I was looking at the function now on Github and it has changed quite a lot it’s not even close to my version anymore (which also includes retina support).

      Admin

Leave a Reply