In this article, I will share on how to get a better page speed score even when you are using TimThumb as your thumbnail resizer for your site. On my Personal Blog I’ve been using this method for quite some time and the result is quite impressive. Let’s begin the tutorial!
Step 1 Preparing TimThumb
First! Older versions of timthumb are notoriously unsecure… So if you have an old version of timthumb, please first download the latest version from TimThumb Google Code. Open the files and look for line 27
view plaincopy to clipboardprint?
- define (‘FILE_CACHE_DIRECTORY’, ‘./cache’);
and replace it with
view plaincopy to clipboardprint?
- define (‘FILE_CACHE_DIRECTORY’, ”);
This makes for a more secure setup, but you can still use the folder ‘cache’ or your own defined name. Hackers and bots know to look for that cache folder, which in older versions would have users set the folder permissions to lower than safe levels.
Step 2 Setting Up New Location for TimThumb
Normally, a theme developer will use timthumb within their theme folder; This is obviously to help users easily use the feature out of the box, but in the interest of security we will change the location for the timthumb to a new folder or to a new subdomain (I use this option on my personal blog). I’ll show you both methods:
Step 2.1 Using a Subfolder
Create new folder “media” on your main domain, ie: yourdomain.com/media
After that, put inside the folder “media” a .htaccess file with code shown below.
view plaincopy to clipboardprint?
- <ifmodule mod_rewrite.c="">
- RewriteEngine On
- RewriteBase /media/
- RewriteRule ^resizer/(.*)x(.*)/r/(.*) resizer/thumb.php?src=http://$3&h=$2&w=$1&zc=1
- </ifmodule>
Next, add a subfolder under “media” named “resizer”, ie: your-domain.com/media/resizer/. Upload the timthumb to this folder and make sure you name your timthumb file as thumb.php. The file structure will be like shown below
- /media
- /media/.htaccess
- /media/resizer/
- /media/resizer/thumb.php
If you enable the cache folder, you need to create the cache folder under “resizer”.
Step 2.2 Using a Subdomain
First you need to setup your subdomain, for example www3.your-domain.com.
After that, put inside the main folder for your subdomain a .htaccess file with code shown below.
RewriteEngine On RewriteBase / RewriteRule ^resizer/(.*)x(.*)/r/(.*) resizer/thumb.php?src=http://$3&h=$2&w=$1&zc=1
Next, add a subfolder “resizer”, ie: www3.your-domain.com/resizer/. Upload the timthumb to this folder and make sure you name your timthumb file as thumb.php. The file structure will be like shown below
- /.htaccess
- /resizer/
- /resizer/thumb.php
If you enable the cache folder, you need to create the cache folder under “resizer”.
Step 3 Usage
After you done with step 2, now you ready to use the timthumb with a custom url. The format you can use for the new custom url is shown below:
Subfolder
http://your-domain.com/media/resizer/250x150/r/your-image-url.jpg
Subdomain
http://www3.your-domain.com/resizer/250x150/r/your-image-url.jpg
The format use for the url is http://www3.your-domain.com/resizer/[image-width]x[image-height]/r/[image-url]
- [image-height] – define the height of the thumbnail
- [image-width] – define the width of the thumbnail
- [image-url] – define the url of the image source, remove http:// from the url, or else the thumbnail generation will failed
Step 4 Usage with AutomagicThumbnail/Image Management
My previous article was about Automagic post thumbnail/image management, if you want to use this custom url feature together with the post thumbnail management, please follow the steps below, there some editing to ensure everything works properly.
First you need to add extra function to your functions.php file.
view plaincopy to clipboardprint?
- function remove_http($url = ”)
- {
- if ($url == ‘http://’ OR $url == ‘https://’){
- return $url;
- }
- $matches = substr($url, 0, 7);
- if ($matches==’http://’){
- $url = substr($url, 7);
- }else{
- $matches = substr($url, 0, 8);
- if ($matches==’https://’)
- $url = substr($url, 8);
- }
- return $url;
- }
After that, look into the function get_attachment_picture(), before the closing bracket, you will see the code as shown below:
view plaincopy to clipboardprint?
- echo $related_thumbnail;
Change the code to
view plaincopy to clipboardprint?
- echo remove_http($related_thumbnail);
After that, you can use the custom url together with the Post Thumbnail/image Management function. Example of usage:
view plaincopy to clipboardprint?
- echo ‘<img src="http://www3.eizil.com/resizer/440×185/r/’.get_attachment_picture();’" width="440px" height="185px">’;
Conclusion
By now you should be able to use this function in any of your themes, if you have any additional suggestions or questions regarding custom url for timthumb, feel free to leave a comment!
http://wp.tutsplus.com/tutorials/using-timthumb-with-custom-urls-for-site-optimization/