Advertisement
Theme Development

Using Timthumb with Custom URLs for Site Optimization

by

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

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

and replace it with

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.


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

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

  1. /media
  2. /media/.htaccess
  3. /media/resizer/
  4. /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

  1. /.htaccess
  2. /resizer/
  3. /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]

  1. [image-height] - define the height of the thumbnail
  2. [image-width] - define the width of the thumbnail
  3. [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:

echo $related_thumbnail;

Change the code to

    echo remove_http($related_thumbnail);

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

echo '';

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!

Related Posts
  • Code
    Theme Development
    The Beginner's Guide to Icon Fonts in WordPressIcon fonts
    I like social icons, I'll admit it. I have literally dozens of social icon sets I've collected over the last few years, and have even created a few sets of my own to try to achieve that perfect fit for a particular project. But lately, I've discovered icon fonts, and I haven't been using those old image icons in a while.Read More…
  • Computer Skills
    Office
    How to Add Videos to Your PowerPoint PresentationsPowerpoint and video
    Videos are a tad harder to add to your PowerPoint presentations than it'd seem at first glance. In this detailed tutorial, you'll learn step-by-step how to add local and online videos to your presentations, and get them to play back the way you want.Read More…
  • Code
    Plugins
    The Beginner’s Guide to WordPress SEO by Yoast: Final TweakingThe beginners guide to wordpress seo by yoast
    In my previous article, I discussed the social settings of Yoast's WordPress SEO plugin. In this tutorial, you will learn the final steps to configuring the WordPress SEO plugin with the ultimate goal of making it as rock-solid as possible for your blog.Read More…
  • Design & Illustration
    Tools
    What's New in Filter Forge 4.0?0942 filter forge preview400
    Filter Forge is a versatile Photoshop plugin, which can be used to create many different types of textures and effects. Its online Filter Library provides instant access to more than 9,890 free community-created filters, and its Visual Filter Editor enables users to assemble their own filters from different components such as blurs, gradients, color adjustments, noises, distortions, or blends – without the need to write any code. Recently, Filter Forge released version 4.0, with some exciting new features for a faster and more organized workflow. Below, is a close look at the biggest improvements introduced in the latest Filter Forge release.Read More…
  • Code
    Theme Development
    Moving Away From TimThumb to BFIThumbBfithumb 400
    TimThumb has been a long time favorite image resize script for WordPress theme authors. But, with the new WordPress Theme Submission Requirements on ThemeForest, we have to say goodbye to TimThumb. This article will teach you how to transition your themes away from TimThumb, and into a new image resize script called BFIThumb.Read More…
  • Web Design
    S.E.O.
    How to Create an SEO-Friendly URL StructureSeo preview
    One of the most basic search engine optimization techniques is in using SEO-friendly URL structures. A good structure can help the indexation process of your website, but, unfortunately, there are plenty of websites that use incorrect, suboptimal URLs. In this article we take a look at the various elements of a URL and how we can create a structure that will help us rank as highly as possible.Read More…