Tạo thumbnail với BFI Thumb

Cập nhật lần cuối vào bởi Lại Đình Cường

Bài viết này sẽ hướng dẫn cho các bạn cách tạo thumbnail với BFI Thumb. Mình đã có lần đăng bài viết sử dụng BFI Thumb thay thế cho TimThumb vì lý do bảo mật. Cũng chính vì dính lỗi bảo mật nghiêm trọng, sau vài lần khắc phục nhưng vẫn bị lại, tác giả của TimThumb đã thông báo ngừng hỗ trợ cho bộ code này.

BFI Thumb là bộ code được tạo ra nhằm thay thế cho TimThumb, công cụ này sẽ giúp cho bạn hiển thị hình ảnh thu nhỏ của bài viết một cách linh hoạt mà không cần phải khai báo kích thước của hình ảnh với WordPress.

Tải BFI Thumb bản mới nhất

Sử dụng BFI Thumb ở đâu?

Bạn có thể tích hợp và sử dụng BFI Thumb trong khi lập trình plugin và viết giao diện cho WordPress. Bộ code này được viết có kiểm tra trùng lặp, do vậy bạn có thể tích hợp nhiều lần trong cả plugin và giao diện thì cũng không ảnh hưởng gì. Khi có sự trùng lặp được phát hiện, BFI Thumb sẽ tự động kiểm tra phiên bản mới nhất và dùng phiên bản đó.

Điều này có nghĩa là, nếu bạn tích hợp BFI Thumb vào giao diện bạn đang dùng, nhưng có vài plugin khác đang chạy trên trang của bạn cũng đang kích hoạt BFI Thumb. BFI Thumb sẽ tự nhận biết được đâu là bộ code mới nhất, nó sẽ lựa chọn bộ code mới nhất để hoạt động, hoàn toàn không ảnh hưởng gì đến giao diện bạn đang dùng.

Sử dụng BFI Thumb như thế nào?

1. Đầu tiên thì bạn phải tải bộ code mới nhất về bằng cách nhấn vào nút mình gửi bên trên.

2. Tiếp đến, bạn tích hợp bộ code BFI Thumb vào nơi mà bạn muốn sử dụng trên WordPress. Đối với giao diện thì bạn có thể bỏ vào tập tin functions.php.

require_once('BFI_Thumb.php');

3. Nhập vào tham số và lấy giá trị đường dẫn mới cho hình ảnh của bạn.

$params = array( 'width' => 400 );
$image = bfi_thumb( "http://mysite.com/myimage.jpg", $params );
echo "<img src='$image'/>";

Đoạn code bên trên sẽ cho ra kết quả đại loại như bên dưới:

<img src='http://mysite.com/wp-content/uploads/myimage-2tj674icu8n8deljokf2tm.jpg'/>

BFI Thumb là gì?

Như mình có giới thiệu bên trên, BFI Thumb sẽ giúp bạn tạo ra hình ảnh thu nhỏ của bài viết một cách nhanh chóng. Bạn có thể nhập vào kích thước của hình ảnh, cũng như áp dụng tính năng cắt hình, thêm bộ lọc vào hình ảnh để biến hình thành trắng đen, hoặc là làm mờ hình,…

Tại sao bạn nên dùng BFI Thumb?

Có rất nhiều cách giúp bạn tạo ra thumbnail cho bài viết, Aqua Resizer cũng như TimThumb đã từng là những bộ code tuyệt vời. Thế nhưng theo thời gian thì mọi thứ có thể thay đổi, hiện tại BFI Thumb có thể nói là công cụ miễn phí tốt nhất giúp bạn tạo ảnh thumbnail cho bài viết, nhưng trong tương lai thì chưa chắc. Cũng giống như TimThumb đã từng được sử dụng trên 80% các giao diện thương mại điện tử.

Kể từ phiên bản 3.5, WordPress đã giới thiệu class Image Editor hoàn toàn mới. Và BFI Thumb được code lại với sự thừa hưởng từ class của WordPress, bạn không cần phải biết nhiều về code PHP, chỉ cần load thư viện của BFI Thumb và sử dụng. Hiện nay BFI Thumb đang là chuẩn để mọi người sử dụng, nếu bạn muốn upload giao diện lên ThemeForest thì BFI Thumb sẽ là sự lựa chọn tuyệt vời dành cho bạn.

Tính năng của BFI Thumb

  • Có thể dùng để thay thế cho TimThumb và các phần mềm của bên thứ 3 khác.
  • Dễ dàng sử dụng.
  • Kế thừ từ các lớp của WordPress.
  • Có thể tạo ra ảnh nhỏ hơn hoặc lớn hơn với chức năng crop.
  • Kết quả trả về là một đường dẫn hình ảnh, bạn có thể sử dụng liền.
  • Có cơ cấu sử dụng lại hình ảnh lúc trước đã dùng.
  • Nếu như tập tin hình ảnh gốc đã bị thay đổi thì thumbnail sẽ được tạo lại.
  • Hình ảnh được tạo và lưu trữ trong thư mục wp-content.
  • Thêm nhiều bộ lọc cho hình ảnh.

Cách sử dụng BFI Thumb nâng cao

Ngoài cách sử dụng cơ bản bên trên thì bạn cũng có thể tham khảo những cách sử dụng nâng cao như bên dưới:

// Resize by width only
$params = array( 'width' => 400 );
bfi_thumb( "http://mysite.com/myimage.jpg", $params );

// Resize by height only
$params = array( 'height' => 300 );
bfi_thumb( "http://mysite.com/myimage.jpg", $params );

// Resize by width and height
$params = array( 'width' => 400, 'height' => 300 );
bfi_thumb( "http://mysite.com/myimage.jpg", $params );

// Crop
$params = array( 'width' => 400, 'height' => 300, 'crop' => true );
bfi_thumb( "http://mysite.com/myimage.jpg", $params );

// Change opacity (makes your image into a PNG)
$params = array( 'opacity' => 80 ); // 80% opaque
bfi_thumb( "http://mysite.com/myimage.jpg", $params );

// Grayscale
$params = array( 'grayscale' => true );
bfi_thumb( "http://mysite.com/myimage.jpg", $params );

// Colorize
$params = array( 'color' => '#ff0000' );
bfi_thumb( "http://mysite.com/myimage.jpg", $params );

// Negate
$params = array( 'negate' => true );
bfi_thumb( "http://mysite.com/myimage.jpg", $params );

// Multiple parameters
$params = array( 'width' => 400, 'height' => 300, 'opacity' => 50, 'grayscale' => true, 'colorize' => '#ff0000' );
bfi_thumb( "http://mysite.com/myimage.jpg", $params );

Hình ảnh được tạo và lưu trữ ở đâu

Những hình ảnh thumbnail sẽ được tạo ra tự động và lưu vào thư mục uploads của WordPress, bên trong thư mục con có tên là bfi_thumb, những hình ảnh đã được tạo thì có thể sử dụng lại nhiều lần. Bộ code này sẽ tự động kiểm tra và khởi tạo lại thumbnail khi hình ảnh gốc bị thay đổi.

Bạn có thể sử dụng BFI Thumb với bất kỳ hình ảnh nào được đăng tải lên Media của WordPress. Đối với các đường link hình ảnh bên ngoài thì không được chấp nhận vì lý do bảo mật.

wp-content/uploads/bfi_thumb/imagefilename-a6bo4u5enilq2h5wq8lc0.jpg

Phía sau đuôi tên của mỗi hình ảnh thì được mã hóa, dữ liệu được mã hóa dựa vào thông số đầu vào nên mỗi hình ảnh sẽ được sử dụng chính xác cho từng trường hợp cụ thể. Nếu bạn muốn thay đổi lại thư mục để lưu trữ hình ảnh thì khai báo dòng sau bên trong code của bạn.

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