Using Timthumb with Custom URLs for Site Optimization

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

1	define ('FILE_CACHE_DIRECTORY', './cache');

and replace it with

1	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.

<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.

<IfModule mod_rewrite.c >
RewriteEngine On
RewriteBase /
RewriteRule ^resizer/(.*)x(.*)/r/(.*) resizer/thumb.php?src=http://$3&h=$2&w=$1&zc=1
</IfModule>

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 Automagic Thumbnail/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.

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:

1	echo $related_thumbnail;

Change the code to

1	echo remove_http($related_thumbnail);

After that, you can use the custom url together with the Post Thumbnail/image Management function. Example of usage:

1	echo '<img src="http://www3.eizil.com/resizer/440x185/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!