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 ?>
<?php if ( $image ) : ?>
<img src="<?php echo esc_url( $image ); ?>" alt="Your Image alt" />
<?php endif; ?>
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 on Aqua Graphite’s website.
View Script On Github
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!
Thanks for the tutorial ! It will surely help thousands
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. 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
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?
Completely safe, because it uses core WordPress functions. There aren’t any cached images being stored temporarily or any 3rd party scripts running.
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.
Yes, I love aqua resizer!
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
Solved. I am lacking the Php GD library. Thank you very much!
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.
The images must be within the WP media library in order for them to crop (for security reasons).
This is great… But can it cause any memory issues if used on all pages on a sidebar for post thumbnails ?
No. Once the images are cropped once they are in your uploads folder and don’t need to be cropped again.
Hi, Syamil MJ
Thank you for share with us,,,,great work,,,,,I used this script in my 5 projects …it helpful me…Thanks again,,,
Is there any tutorials for none skilled people on how to use this aqua crop script? It sounds really nice to me.
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.
useful script ! Thanks 🙂
Hi,
Thanks “Aqua Resizer” a super plugin
my problem animation gif image not work blank src=””
Is there a solution to the problem?
Gifs can’t be resized or cropped, it’s impossible.
This was exactly the functionality I was needing. Great script, thanks for sharing this!
I ran into one issue with it not working for images that were smaller than the cropped image size. Can be fixed by using the function like this:
Thanks to totpero (https://github.com/totpero) for posting: https://github.com/syamilmj/Aqua-Resizer/issues/42
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).
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
It might be an issue with PHP memory limit, try increasing it using WP_MEMORY_LIMIT.
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
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.
Aqua Resizer not works in amazon server any idea,,,,.?
Thanks….
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.
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
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.
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.
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.
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!
doesn’t work in loop in my front-page
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.
Hi there. I am looking for an advice. I am getting lots of errors in my nginx log. I don’t know if it’s the server setting or other issue. Thank you for your time.
PHP message: Aq_Resize.process() error: Unable to resize image because image_resize_dimensions() failed
Check your code, if you notice the error is actually coming from your theme or plugins due to incorrect dimensions.
Hi, When i upload SVG image script not works any idea ?
I am not sure. I think it should work. Make sure your SVG Is uploaded correctly in your uploads folder. I actually don’t really use this script anymore, I created my own script to use now 😉
HI AJ, I am using aqua resizer on all my project. Recently one of my client asked me, not to store all the regenerated image on the upload folder. Just crop or resize image, display that image and after the use delete it. But the script automatically store all the regenerated images on the same folder. Is it possible to use this script like this.
They have to be stored somewhere. You can store them in a cache folder and then setup a cron job on the server to delete the items in that server every so often. But I would not do this. Resizing images uses server resources and re-sizing them every-time someone visits the page will slow things down. Most webhosts these days provide unlimited storage so who cares if they are stored on the server…
Would love to have all generated images go into a separate folder so I can gitignore
Anyway to get this working with W3 Total Cache CDN? Or is there a convenient way to disable it all together?
You may have to tweak things depending on how your CDN works…For example our CDN generates the images from the front-end so images are resized before they are uploaded to the CDN. If yours works differently you may need to tweak the plugin or consider just using the built-in WordPress thumbnail functions. There are a lot of great new plugins these days for optimizing how the WordPress thumbnails work I don’t even use re-sizing scripts anymore because of it.
why does it reduce image quality when resizing? i find im losing a hell of a lot of details when it auto resizes. If i resize in photoshop i lose no details and images are sharp. With the aq resizer images go soft and blurry.
If your images are JPEGS then WordPress will compress these (Google how to set jPEG quality to 100% in WordPress). WPExplorer actually released a brand new and much better image resizing script though which you can find on our Github (currently named nova-wp-image-resizer).