Code Monkey home page Code Monkey logo

bfi_thumb's Introduction

bfi_thumb v1.3

On the fly image resizer / cropper / grayscaler / colorizer / opacitor :) for WordPress

Update: BFI Thumb now integrates into the core WordPress image functions, you actually don't have to call bfi_thumb to use it!

You can read the tutorial and get more information about BFI_Thumb from this article: Moving Away From TimThumb to BFIThumb

Supports WordPress 3.5+

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

The code was inspired by the awesome Aqua Resizer

Where do I use this?

You can use this script in your WordPress themes or plugins. The script is safe to be included multiple times in a single WordPress site by different plugins and themes. When multiple versions of BFI_Thumb are found within a site, the newest version will be used.

This means that if you use bfi_thumb in your WordPress theme, and some plugins you also have activated use bfi_thumb, they would all work without any problems.

Demo

My themes usee BFI Thumb to generate all it's images:

Where are the images stored?

Bfi_thumb stores previously created images in WP's default uploads directory in the subdirectory bfi_thumb, and uses those for future calls. The script automatically checks for updates on the original image then re-creates new images when needed. Any image can be used as long it is in your WordPress instance. Remote images are not supported due to security concerns.

You can change the location of where the images are saved by defining this constant anywhere in your code:

// Change the upload subdirectory to wp-content/uploads/other_dir
@define( BFITHUMB_UPLOAD_DIR, 'other_dir' );

Why Make a New One?

Aqua Resizer is awesome, WP's Image Editor is awesome, Timthumb is awesome.

When WP reached 3.5 and introduced the Image Editor class, as a theme author I couldn't anymore use Timthumb in my WP themes. An alternative was to use Aqua Resizer instead. Although it did the job quite well, I needed some of the functionalities supported by Timthumb.. I needed to be allowed to grayscale, color tint images and change the opacity of images all while resizing them. I couldn't find anything that did everything I wanted, so I made BFI_Thumb.

Usage (New Method)

Use this if your image can be accessed by WP functions such as the_post_thumbnail

  1. Include / require BFI_Thumb.php into your WordPress files.
require_once('BFI_Thumb.php');
  1. Call your normal WordPress image functions, specify an array as the $size of your image, then add a parameter 'bfi_thumb' => true to it.
// Getting the featured image without bfi_thumb
the_post_thumbnail( array( 1024, 400 ) );

// With bfi_thumb
the_post_thumbnail( array( 1024, 400, 'bfi_thumb' => true ) );

// With bfi_thumb & with parameters
the_post_thumbnail( array( 1024, 400, 'bfi_thumb' => true, 'grayscale' => true ) );

// Getting an attachment image with bfi_thumb & multiple parameters
$params = array( 400, 300, 'opacity' => 50, 'grayscale' => true, 'colorize' => '#ff0000' );
wp_get_attachment_image_src( $attachment_id, $size )

This method can be used also in other WordPress image functions that accept a $size parameter.

Usage (Old Method that still has it's uses)

Use this if your image cannot be accessed by WP functions such as the_post_thumbnail

  1. Include / require BFI_Thumb.php into your WordPress files.
require_once('BFI_Thumb.php');
  1. Call the function to get the image URL
$params = array( 'width' => 400 );
echo "<img src='" . bfi_thumb( "URL-to-image.jpg", $params ) . "'/>";

$params is an associative array containing the actions to perform on your image.

Examples:

// Resize by width only
$params = array( 'width' => 400 );
bfi_thumb( "URL-to-image.jpg", $params );

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

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

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

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

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

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

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

Changelog

v1.3

  • Now integrates in WordPress image functions

v1.2.1

  • Fixed T_PAAMAYIM_NEKUDOTAYIM error in PHP 5.2.x

License

GPL 3.0

It's not required but I appreciate if you attribute and/or link back if you find this helpful :)

Social Stuff

Twitter: @bfintal & @gambitph

Google+: +Benjamin Intal

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.