How to make the Get The Image WordPress plugin to work with BFI Thumb

I regularly use “Get the Image” WordPress plguin in my themes (thanks to Justin for developing such a wonderful plugin), which does a super fantastic job for searching through posts and getting the images I want.

Then usually all these images have to be resized, cropped and given some nifty effects which aren’t quite easy with the default WordPress Thumbnail function, so I use a php script to resize the images. In the past I have used “timthumb” but now since the ever dominant ThemeForest has asked NOT TO use timthumb and shift to BFI Thumb.

Bfi_thumb resizes image on the fly using WordPress’ Image Editor classes, thus supports both Imagick and GD and switches automatically depending on what’s available. The default Image Editors only have a handful of basic functions (crop, resize, rotate, etc), bfi_thumb also extends these classes to include these new functions:

  • Grayscale
  • Color (colorize)
  • Opacity
  • Negate
  • Resize images down or UP

So, I have been working out with this nifty script and find it quite amazing just like timthumb. Even though it is pretty easy to use, this tutorial is dedicated to make use of “Get the Image” and “BFI Thumb” together.

Step 1: Getting BFI Thumb setup

Yes, setting up BFI thumb is as easy as cake. Just download the BFI Thumb code from Github.

Next is placing a simple code in your functions.php file, that is below and you are done

 

Step 2: Get the Image URL

Okay so once we have installed the plugin “Get the Image” it is time to get the image url which will later be used with BFI thumb script. Now this could have been tricky but fortunately, a simple PHP code and use of some array’s help us get the image url in a giffy. The code follows.

Right, i’ll explain the code above. First we have checked if the plugin exists so we don’t break the theme in any case. Then we scan the image, pull the image into an array and call the size which would be full width, giving us more control on the resize function. Also there is an if/else statement that we could use in the cases where an image is found and when there is no image.

Step 3: Use the extracted Image and apply BFI thumb

Right, this tutorial is for simple integration so if you need to use any advance features by BFI Thumb , just go ahead and read the “readme“. Now we will be using the following code.

What we have done above is combined the BFI Thumb along with the image we extracted using the above code. See the “width”, “height” and “crop” i used which is quite basic and easy to understand and edit.

FINAL CODE

So our final code looks like something below

ISSUES

‘Get the image’ doesnt seem to have any methods to reduse the stress on the server. That means that every time you list 5 posts like I do, you have to scan the posts again and again and again, every time someone visits your blog, and if you use the plugin in many places in combination with BFI Thumb, chances are that you have to scale the thumbnails over and over again as well. Good News is that I know a fix to this as well which I’ll share in a couple of days.

Leave a Reply

Your email address will not be published. Required fields are marked *