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.

Why Did We Use TimThumb?

Before WordPress had the capability of performing flexible image resizing, the only option was to use third party libraries like TimThumb. The nice thing about TimThumb was that it was packed with features, and it was very easy to use.

You didn't need to do much for it to work, you would just have to use the TimThumb script as your src attribute in your img tag and pass it the image:

<img alt="" src="http://mysite.com/mytheme/timthumb.php?src=cool_image.jpg" />

With just that simple change, you could:

• Resize the image
• Crop a portion of the image
• Apply image filters like grayscale and tint
• Cache the created image for future use

These functions allowed us to create awesome looking images that were not limited to small square thumbnails.

Why We Can't Use TimThumb Anymore

One good reason is the major security flaw in TimThumb that was discovered and exposed in version 1.10. In a nutshell, there was a loop hole that allowed malicious code to be run on the servers that hosted a TimThumb script.

Many sites were hacked because of this - including some of my own - and also some of my themes' users. Although this was fixed in subsequent versions of TimThumb, a lot of people were not even aware of the security flaw until it was too late. It was up to the theme authors and site owners to update their themes or TimThumb scripts to include the fix.

In my opinion, the problem with this debacle was not because of the security hole itself, but more because of how this type of issue couldn't be easily fixed on a global scale. Since TimThumb was a no-frills, third-party script, it was hard for people to get a hold of the security update quickly, or even to just get notified that a security flaw existed.

If a security flaw of this level was found in the WordPress core however, it would most likely be patched right away with a quick WordPress security update and most people wouldn't even be aware of the issue.

With that being said, it might be better to use a WordPress function to perform our image resizing.

So, we have to drop TimThumb from our WordPress themes. As theme authors on ThemeForest, perhaps the most obvious reason is that TimThumb is no longer allowed with the implementation of Envato's new WordPress Theme Submission Requirements.

WP Image Editor to the Rescue... Sort Of

Lucky for us, when WordPress 3.5 was released, it introduced the WP Image Editor class. This class has some basic functions for rotating, cropping, and resizing images. Now we have built-in image resizing within WordPress!

Probably one of the best features of the WP Image Editor class is that it supports both GD and ImageMagick libraries (unlike TimThumb that only supported GD). This means that our themes can support more WordPress installations.

This is how you would use the WP_Image_Editor class:

// Return an implementation that extends WP_Image_Editor
$image = wp_get_image_editor( 'cool_image.jpg' );

if ( ! is_wp_error( $image ) ) {
	$image->resize( 400, 300, true );
	$image->save( 'new_image.jpg' );
}

WP Image Editor Extended

The WP Image Editor is simple, but a bit lacking for our intentions. You'll clearly need to create your own wrapper function so that you won't have to use a bunch of code every time you want to display a resized image.

Another thing to note is that the wp_get_image_editor function accepts only an image file path, you'll also need to add into your wrapper function a method to convert it to your image URL.

Aside from the need to create a wrapper function, there are a few shortcomings to straightforwardly replacing TimThumb with the WP_Image_Editor class:

• It can only perform resizing, cropping and saving of image files
• No image filters
• No image caching
• Can only resize images down and not up
• Both width and height dimensions are required to perform a resize
• Usage differs from TimThumb

It would be nice if we had something that incorporates features of both the WP Image Editor class and TimThumb. This is the reason why I created the script BFIThumb.

Best of Both Worlds: BFIThumb

I would like to introduce you to a new image resizer named BFIThumb. BFIThumb was made with these points in mind:

• Use WP_Image_Editor to perform image manipulation - Using this WordPress class allows for less bugs, since the bulk of the process isn't performed by our own code. This means that we can also provide resizing for both GD and ImageMagick libraries.
• Similar usage to TimThumb - TimThumb's usage is ideal, since you only have to change the src attribute of your img tags. The resized image's path would be returned by the function. This allows for a more readable code and simpler transition time.
• Similar capabilities to TimThumb - The ability to apply image filters was one of the selling points of TimThumb. Since we want an easy transition, it would be best if some of the commonly used image filters were still available.

How It Works

• The script extends WP_Image_Editor and adds more functionality.
• Implements a more flexible resizer that allows resizing by width or height only. This is especially helpful in Masonry layouts, you can downsize image widths while retaining the original height ratio.
• The extended classes implement some image filters found in TimThumb.
• Caches processed images in WordPress' uploads folder for faster loading on future page loads.

How to Use It

BFIThumb was made to be similar to TimThumb's usage. The main function you'll need to call is bfi_thumb. Similar to TimThumb, you'll use this function in the src attribute of your img tags. This function takes in an image URL along with an array of parameters, then returns the URL of the processed image.

Here's the basic usage of the function, broken down to explain what happens:

// Include the library
require_once( 'BFI_Thumb.php' );

// Our parameters, do a resize
$params = array( 'width' => 400, 'height' => 300 );

// Get the URL of our processed image
$image = bfi_thumb( 'URL-to-image.jpg', $params );

// Print out our img tag
echo "<img alt="" src="$image" />";

Resize & Crop

To perform resizing and cropping, you'll just need to put in the necessary parameters:

// Resize by width only, the height will adjust to the correct ratio
$params = array( 'width' => 400 );
$image = bfi_thumb( 'URL-to-image.jpg', $params );

// Resize by height only, the width will adjust to the correct ratio
$params = array( 'height' => 300 );
$image = bfi_thumb( 'URL-to-image.jpg', $params );

// Resize by width and height and crop
$params = array(
	'width' => 400,
	'height' => 300,
	'crop' => true
);
$image = bfi_thumb( 'URL-to-image.jpg', $params );

Image Filters

Image filters are quite helpful, and if used correctly can enable cool effects in your themes. For example, the grayscale image filter can be used to create black and white images that become colored when hovered on.

I also had a use for the opacity filter when I needed to make the background image opaque to show a bit of the background color.

// Grayscale
$params = array( 'grayscale' => true );
$image = bfi_thumb( 'URL-to-image.jpg', $params );

// Colorize
$params = array( 'color' => '#ff0000' );
$image = bfi_thumb( 'URL-to-image.jpg', $params );

// Negate
$params = array( 'negate' => true );
$image = bfi_thumb( 'URL-to-image.jpg', $params );

// Change opacity (makes your image into a PNG)
$params = array( 'opacity' => 80 ); // 80% opaque
$image = bfi_thumb( 'URL-to-image.jpg', $params );

// Multiple parameters
$params = array(
	'width' => 400,
	'height' => 300,
	'grayscale' => true,
	'colorize' => '#ff0000'
);
$image = bfi_thumb( 'URL-to-image.jpg', $params );

Conclusion

In this article we learned how to remove our dependency on TimThumb and move on towards a more WordPress oriented approach to perform image resizing using BFIThumb. With this approach, we can perform some flexible image resizing and also use some of the image filters that we loved in TimThumb.

Hopefully this small script can help you with your transition away from TimThumb. If you have any suggestions for new features to make this image resize script better, kindly leave a comment below.

I highly appreciate any feedback, comments and suggestions.

What are you replacing TimThumb with? Would you be using BFIThumb in your next WordPress theme? Let me know what you think!