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 59 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
  17. Yuvraj Khavad (@yuvrajkhavad) says:

    First thank you for great script. Most our project our team use your script for resize images. Most of we have only one problem for this… when we set range of images for resize image for example (200 * 300 ) but when user upload less then this range script not work and source of image set blank.

    any one have solution then let me know…..

    thanks

    1. AJ Clarke says:

      It might be an issue with PHP memory limit, try increasing it using WP_MEMORY_LIMIT.

      Admin
  18. Fernando Eduardo Lourenço says:

    I use a theme that makes use of resizer acqua.
    I set up a bucket amazon s3 for all media files. Basically, the files are loaded default folder and then sent to the S3.
    Theme slides do not work with the bucket. I contacted the theme developer and he told me that the problem should be the resizer acqua.
    Can you tell me if the script only works if the images are in the folder uploads\
    thank´s

    1. AJ Clarke says:

      Hi Fernando, yes Aqua Resizer uses the native functions for cropping/trimming/saving images so images are stored in the uploads folder. You may need to make some additional tweaks if you want your images stored on Amazon S3. Other CDN’s will work flawlessly, for example I use WPEngine and their CDN grabs the image after it’s cropped so it works fine.

      Admin
  19. Yuvraj Khavad (@yuvrajkhavad) says:

    Aqua Resizer not works in amazon server any idea,,,,.?

    Thanks….

    1. AJ Clarke says:

      Images have to be stored in uploads folder, you would have to make a lot of edits to aqua resizer to be able to have it automatically save cropped images to your amazon account.

      Admin
  20. Luvlee says:

    Hi, I’m having trouble with images smaller than the theme desired dimensions. I have a bunch of images smaller (500px wide) than the theme requested dimensions (640X420) but aq_resizer is defaulting to showing those images at 150x150px. Is there a way to default to showing the 500px wide version of the image instead of the cropped thumbnail? Thanks

    1. AJ Clarke says:

      Aqua Resizer is supposed to return whatever custom dimensions you input to the function. Not really sure I understand what’s going on here, if you are working with a theme that you didn’t create you should contact the theme developer for some help.

      Admin
  21. maspiter says:

    Nice script but it can actually make the image file size bigger for a lower resolution version than the original. Just something to watch out for.

    I used ImageOptim to optimize my images and with a (give or take) 10% downsize in resolution it resulted in (give or take again) 2x bigger file sizes. After all necessary images had been generated I optimized them once more to gain some performance. However this is probably not a viable option for most people.

    1. AJ Clarke says:

      Once your images are cropped they are saved to your uploads folder and because the script isn’t using “add_image_size” then the images can’t be “regenerated” via the standard regenerate plugins, you have to use a plugin such as “Force Regenerate” thumbnails that removes all cropped images so they can be re-generated (when you view your site) using the newly optimized un-cropped images.

      Admin
      1. AJ Clarke says:

        I actually have a highly modified version of this script I use in my Total theme which combines the add_image_size function as well as full retina support and also image-crop locations 😉 It’s a good script as is, but it can be tweaked into an awesome script!

        Admin
    1. AJ Clarke says:

      It should, doesn’t matter what page you are on…Double check your code to make sure it’s correct. Also make sure ImageMagick is active on your site, images are hosted in your uploads directory and the permissions are set correctly on it.

      Admin

Leave a Reply