Caching thumbnails generated by TimThumb
UPDATE: As of Events Manager 5.5.4 we’ve stopped using TimThumb since the script is not being maintained anymore. We wrote a post about it, describing the reasons for stopping using TimThumb and the alternatives available, please read that for more information.
Events Manager uses TimThumb to generate images. This is a great bit of script that makes showing thumbnails of any size very quick and very easy.
The major downside of TimThumb though is that every time you show a thumbnail on your page, the link to the image is actually to a timthumb.php file which then generates a thumbnail or grabs a cached version from our uploads/em-cache directory. The fact that there already is some form of caching is great, however there is a unecessary load on the server since each time you request a thumbnail some PHP processing is needed to serve the file. This becomes a bigger problem when you’re showing many thumbnails on one page and/or have high volumes of traffic.
Fortunately there is a solution! In particular you can use the combination of a caching plugin along with a CDN, which can store cached versions of your timthumb images without accessing your server each time for the same thumbnail.
In this example, we’ll highlight how you can use the popular W3 Total Cache plugin and Amazon CloudFront. This tutorial expands on suggestions already made by Ben Gillbanks at BinaryMoon (current maintainers of TimThumb).
We’re not going to cover how to set up W3TC, we’ll assume at this point you’ve already successfully set up a CloudFront CDN and your normal images, stylesheets and scripts are already being correctly served by the CDN. If you look at a thumbnail generated by EM, you’ll notice that it is not being served by the CDN yet, as there’s two steps you need to take.
1. Add a Behaviour for TimThumb on CloudFront
By default, CloudFront urls will not accept and pass on Query Strings, meaning timthumb.php will not receive the relevant information it needs to find the right thumbnail and return the right size. However, it is very easy to add a rule to your CloudFront account which will allow this to happen.
Firstly, visit your CloudFront management console, you will see a list of your current distributions as seen below. You then need to access the distribution settings for the site you are working on by clicking the information icon (the grey i icon).
Then, visit the Behaviours tab, the screenshot below shows a CDN with the behaviour we’ll be adding already there, chances are you’ll only see one row.
Now you’ll create a behaviour which will allow timthumb.php requests to have querystrings passed on. Click the Create Behaviour button and fill out the form to contain these values:
Path Pattern : */timthumb.php
Origin : Choose an origin from the dropdown, by default you only have one to choose
Forwarded Query Strings : Yes
You’re done configuring CloudFront. In the event that you’ve done this step after step 2, if you test this out you’ll still see errors because you are still viewing incorrectly cached versions of your thumbnails, you should visit the invalidations tab (or use the purge tool in W3TC) and invalidate the current cache of your timthumb.php file. After a few minutes it will start working as expected.
Now onto configuring W3TC
2. Configure W3TC to use the CDN for TimThumb images
Visit your W3TC CDN settings and scroll down to the advanced options.
You’ll see an option called Custom file list, in this textbox add a new line and write timthumb.php or alternatively the full path to your Events Manager timthumb file which is by default wp-content/plugins/events-manager/includes/thumbnails/timthumb.php
Save your settings, purge your page cache if applicable.
3. Test your site
That’s it! It’s time to check out your site, if you view the source of your thumbnails they should now be pointing to your CloudFront CDN url!
If all is done well, then you should start seeing decreased page loading times and server loads.
Hey, thanks for the tutorial, it helped me set up one of my client’s sites on cloudfront. The only thing I had to change was I had to put *timthumb.php in the custom file list, not just tumthumb.php. Though it may have also worked if I’d done the full path as you specified.
I’ve got a question for you. Why do you use TimThumb? TimThumb has been known to have hole in the software. Why not just create new image sizes that you need. add_image_size (‘name’ , width , height ) ?? this is safer and fast because when the images are uploaded all the sizes are created. This also safes another HTTP required and SERVER hit because it doesn’t need to re-generate another image.
We use TimThumb because it does the job really well, especially if you want to use different sizes in various placees. It has more flexibility in terms of sizing specifically compared to wp thumbnails.
Like any open source scripts (including WP itself), vulnerabilities can crop up. In the case of TimThumb it is currently deemed safe, the hole you’re referring to was fixed pretty quickly (a long time ago), and we started using TT after this vulnerability was reported/fixed.
add_image_size is something your theme should take care of, but you can opt to use WP Thumbnails tha make use of this function and avoid TimThumb altogether in your Dashboard > Events > Settings > General > Performance Optimization.
Regardig performance, if you use the CDN method above, the performance hit is negligible (in some cases, it’s faster!).
Thanks for the response. I agree with the open source comments.
I never noticed the Performance settings and will be using it from now on.
add_image_size isn’t only for themes. Its for anyone to use.
Hey Justin, r.e. add_image_size good point… just assumed it was as that’s where they’re normally used!
In this case though, I’d lean towards leaving it as is, and allowing people to add this to their functions.php file or similar as needed, because there’s no set amount of image sizes someone may want to have, plus there’s also the issue of regenerating thumbnails when changing/adding these new sizes.
Thanks for this post, I was looking for help on setting up timthumb+cloudfront, this explanation was direct to the point
Hi this is a good post not only for Event manager specific pages. However this did not work for me when i a dded “*timthumb.php” to custom file list all it did was translate the path to timthumb with my cnames for my cdn and not the image path e.g.
I’ve learned a lot in this article! It’s great that you are giving an idea for those who want to be an event manager. It can also help using Timthumb.php thank you for posting this!
Wow thanks so much, I’ve been searching for a solution to make Timthumb works with Cloudfront, so I can use the Justified Image Grid plugin. Thanks!!
thx u so much..im new with wordpress so i a little bit confused until i find this article.now i can use Timthumb.php
I hate premium WordPress themes using TimThumb. They often load ridiculously slow. Does this method help fasten the site speed? Did anyone try?
Very useful plugin for websites that use a lot of events