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:

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.

if ( function_exists( 'get_the_image' ) ) {
$image = get_the_image( array( 'image_scan' => true, 'format' => 'array', 'size' => 'full' ) );
if( ! empty ( $image ) ) { ?>
	//Image found do your stuff (BFI thumb)
<?php } else { ?>
	//No Image found, default image?
<?php }} ?>

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.

  $params = array( 'width' => 960, 'height' => 380, 'crop' => true );
  echo "<img src='" . bfi_thumb( $image[url], $params ) . "'/>";

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.


So our final code looks like something below

if ( function_exists( 'get_the_image' ) ) {
$image = get_the_image( array( 'image_scan' => true, 'format' => 'array', 'size' => 'full' ) );
if( ! empty ( $image ) ) { ?>              
  <div class="feat-img"> 
      $params = array( 'width' => 960, 'height' => 380, 'crop' => true );
      echo "<img src='" . bfi_thumb( $image[url], $params ) . "'/>";
<?php } else { ?>
	<img src="" />
<?php }} ?>


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

WooCommerce – Get Product Prices, Simple or Variation

Hey guys,

These few months have been quite busy and was not able to share snippets or codes along the way, nor was able to write for the personal blog. But for the last week I have been working on a WooCommerce theme that has been totally customized.

People usually want to get the pricing of products and want to wrap it in their own html and styles. So the basic code (below) does not work.

<?php echo $product->get_price_html(); ?>

So I am sharing with you guys a code that can be used for WooCommerce product pricing display. This code has been tested upto Version 2.0.14. I’ll explain the code below.


//get the sale price of the product whether it be simple, grouped or variable
echo $sale_price = get_post_meta( get_the_ID(), '_price', true);

//get the regular price of the product, but of a simple product
$regular_price = get_post_meta( get_the_ID(), '_regular_price', true);

//oh, the product is variable to $sale_price is empty? Lets get a variation price

if ($regular_price == ""){
#Step 1: Get product varations
$available_variations = $product->get_available_variations();

#Step 2: Get product variation id
$variation_id=$available_variations[0]['variation_id']; // Getting the variable id of just the 1st product. You can loop $available_variations to get info about each variation.

#Step 3: Create the variable product object
$variable_product1= new WC_Product_Variation( $variation_id );

#Step 4: You have the data. Have fun :)
$regular_price = $variable_product1 ->regular_price;

echo $regular_price;

So, what you see above is we have printed/echoed he sale and the regular price and if you can read between the lines the code is pretty self-explanatory.

Good Luck

Widgitize the Sidebar

Right, I have been working with wordPress for a long time now. I was recently working on a WordPress theme and working on the sidebar. You know that Sidebar’s are widgitized so if you are looking for a quick way to add a sidebar widget follow this quick method.


if (function_exists("register_sidebar")) {
    'name' => 'left-sidebar',
    'before_widget' => '<div class="side-widget">',
    'after_widget' => '</div>',
    'before_title' => '<h2>',
    'after_title' => '</h2>',

Right, this code goes into the functions.php file of your active theme. This function adds a Widget in your theme.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('left-sidebar') ) : ?>
<!-- Add your stuff here -->
<?php endif; ?>

The code above goes in your sidebar or your where you want to add the sidebar.