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
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!
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!
This script is great :) Very easy to use for a newbie like me. Thanks.
I’m a newbie.tell me where to put the script.thanks
Functions.php is fine or in it’s own file in your theme and then use require_once() in functions.php to load it.
if I don’t want resize image, how I do that?
Use 9999,9999 for each value when using the Aqua Resizer. Or don’t use it. Simply use get_post_thumbnail_url()
Hi, it’s possible resize with auto width?
Set width to 9999 and give the height a specific value then set crop to false.
Thanks!!! Thats exactly what i was looking for! Love the script!
Thanks AJ Clarke,
How can implement aqua resizer use responsive design? I have try it but image crash
There is no difference whether the design is responsive. Sounds like you might be misusing the script to begin with.
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
No, this script is used to resize images on the fly after they are uploaded to show on the front end. What you need requires something else. Doing a quick search this is the only thing I could find that meets your criteria – http://wordpress.stackexchange.com/questions/67107/impose-a-maximum-limit-on-image-upload-size – there might be a good plugin out there though that does this. Have a look on WP.org.
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?
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 ;)
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.
The script can both crop and resize, depends on your options. And yes the images are stored on the server as mentioned above, for security and speed – Please see the wiki: https://github.com/sy4mil/Aqua-Resizer/wiki
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.
You can use the wp_is_mobile() function to set different image sizes for mobile devices – http://codex.wordpress.org/Function_Reference/wp_is_mobile
However, you shouldn’t rely have to do this. Just add in your css:
img{ max-width: 100%; height: auto; }
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!
Set the crop value to false. Example…. aq_resize(image_url, height, width, false) – this will make images resize as opposed to crop.
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
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.
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?
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:
Thank you so much, it works