Timthumb was very popular in past and was being used in every project which have re-sizing image functionality but that script is not continue because this script contains many bugs. Using this bug, someone can inject script in your hosting.
And now, its time to move from timthumb to another on-the-fly image resizeing script. In wordpress, many developers offers image resizing technique, such as Matthew Ruddy who creating WordPress Timthumb alternative, you can download its script from github.
As WordPress theme developers, we might create a theme – or themes – that require images to be of a certain specific size (dimensions). At the same time, we can’t place the responsibility of creating such dimension-specific images on the end users of our themes.
TimThumb
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 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.
BFIThumb Script
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" />";
We can download this BFI_Thumb.php file from google and add it in our theme folder.
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.