[WP Tip] Timthumb & featured image

Trên izwebz thì cũng có bài viết hướng dẫn cách sử dụng featured image để tạo thumbnail rồi. Nhưng trong bài viết này mình sẽ hướng dẫn các bạn kết hợp giữa timthumb và featured image để tạo ra những hình ảnh thumbnail hay sử dụng trong bài viết với kích thước có thể tùy chỉnh một cách thoải mái.

Đây là một mã nguồn mở PHP với chức năng là crop và scale hình ảnh với các định dạng phổ biến như (JPG, PNG, GIF). Timthumb rất dễ dàng để sử dụng cho blog, website và một vài ứng dụng khác. Timthumb được phát triển bới Tim và Darren Hoyts, và nó đã liên tục nâng cấp các phiên bản để chữa lỗi, và thêm các tính năng mới.

Cách hoạt động: timthumb cung cấp cho bạn một function có sẵn, bạn chỉ việc cung cấp các tham số và nó sẽ tự động thay đổi kích thức ảnh của bạn một cách tự động.
Timthumb đang được sử dụng rộng rãi đặc biệt là các nhà phát triển website trên nền CMS WordPress.

Điều đâu tiên mà bạn cần làm đó là phải download file timthumb.php về máy của mình để sử dụng. Bạn có thể download tại đây: http://timthumb.googlecode.com/svn/trunk/timthumb.php

Sau đó để có thể sử dụng nó bạn phải có 1 cái localhost để chạy php. Và bạn cần 1 tấm hình để có thao tác được với các chức năng đơn giản của timthumb. Và cuối cùng là một tạo folder cache nằm cùng cấp với file timthumb.php.

Cấu trúc của timthumb thì như thế này:

<img src="timthumb.php?src=link_hinh_anh.jpg&amp;w=300&amp;h=300&amp;q=50" />

Giải thích các kí hiệu:

• link_hinh_anh.jpg – đường dẫn hình ảnh theo định dạng http://domain.com/hinhanh.jpg
• w=300 – tức là width (chiều dài) của ảnh bằng 300px
• h=300 – tức là height (chiều cao) của ảnh bằng 300px
• q=50 – tức quality (chất lượng) của ảnh bằng 50% so với ảnh góc.

Tuy nhiên các bạn cũng có thể không cần phải dùng hết cả các tham số truyền ở trên.
– Nếu chỉ có width không thì nó sẽ tự động scale height hình cho hợp với chiều dài của hình và ngược lại.

<img src="timthumb.php?src=link_hinh_anh.jpg&amp;w=300" />

– Nếu bạn để cả height và width thì nó sẽ vừa scale và crop hình của bạn lại cho phù hợp với width và height mà bạn chọn.

<img src="timthumb.php?src=link_hinh_anh.jpg&amp;w=300&amp;h=300" />

– Nếu các bạn ko để cả width height và quality thì nó sẽ để mặc định là width:100px; height:100px; quality:90%. Các bạn cũng có thể tìm và tùy chỉnh trong file timthumb.php các chỉ số mặc định trên.

<img src="timthumb.php?src=link_hinh_anh.jpg" />

Trước tiên, bạn phải bật chức năng Featured Image bằng cách vào file functions.php của wordpress và thêm đoạn code sau:

 add_theme_support( 'post-thumbnails' );

Sau đó là chúng ta sẽ viết 1 hàm để lấy link của file Featured Image mà chúng ta add vào bài viết.

function get_featured_img($post_id){
$error_img = get_bloginfo('template_url').'/images/error.jpg';// link hình ảnh nếu ko có ảnh featured
$images = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'single-post-thumbnail' ); // lấy link hình ảnh?
if ($images) { // nếu có hình ảnh featured
	return $images[0]; // sẽ trả về giá trị link hình của featured
}else{
	return $error_img; // nếu ko có thì sẽ trả về giá trị hình error
}
}

Tiếp theo, chúng ta sẽ viết thêm 1 hàm nữa để sử dụng timthumb với các tùy chỉnh width; height; quality; alt

function thumb_img($post_id,$h,$w,$q,$alt){
echo '<img align="middle" src="';
echo bloginfo('template_url');
echo '/timthumb.php?src='.get_featured_img($post_id).'&amp;h='.$h.'&amp;w='.$w.'&amp;q='.$q.'" alt="'.$alt.'" />';	
}

Cuối cùng, để sử dụng thì chỉ việc gọi function thumb_img() ra thôi.
Ví dụ như trong vòng lập Loop ở file single.php hay index.php thì chúng ta có thể gọi nó ra như thế này:

<?php $my_query = new WP_Query('posts_per_page=10');
if ( have_posts() ) : while ($my_query->have_posts()) : $my_query->the_post(); ?> 

<?php thumb_img($post->ID,'670','150','70',get_the_title()); ?>
// $post->ID tương ứng với post id của bài viết.
// 670 tương ứng với chiều dài.
// 150 tương ứng với chiều cao.
// 70 tương ứng với chất lượng hình ảnh.
// get_the_title() lấy title của bài viết
<?php endwhile; else: ?>
<?php endif; ?>

Download TimThumb Example

Vậy là chúng ta đã hoàn thành việc sử dụng featured image và timthumb. Hi vọng các bạn sẽ làm được thành công. Ngoài ra còn các các cách khác để sử dụng featured image làm thumbnail, các bạn có thể tham khảo.

• Tạo Thumbnail không dùng Custom Field
• Thumbnail sử dụng Custom Field
• WordPress – Post Thumbnail
• Tạo WordPress theme – Sidebar và Thumbnail

Vì sao timthumb không hoạt động?

Trước tiên, bạn cần phải xác định được timthumb đang gặp phải lỗi gì cả.
1/ Debub website bằng cách dùng chrome, nhấp f12, mở qua tab console xem nó xuất hiện lỗi gì? Nếu không thấy lỗi thì tiến hành debug link timthumb, inspect element thằng hình ảnh, rồi copy cái link của thằng timthumb, chạy trực tiếp trên tình duyệt xem nó thông báo lỗi gì? Và sau đây là 2 lỗi thông báo phổ biến nhất:
– Lỗi chưa chmod thư mục Cache của timthumb, dẫn đến nó ko thể ghi tập tin mã hóa tạm vào đó, nên ko tạo được hình ảnh timthumb. Do đó, bạn hãy chmod lại thành 775 hoặc 777.
– Lỗi xài hình ảnh ngoại, mặc định nó không cho chúng ta dùng link ngoài, do đó, phải enable lên bằng cách vào file timthumb.php và tìm dòng define (‘ALLOW_EXTERNAL’, FALSE); //Chữa FALSE thàng TRUE
2/ Trong trường hợp bạn copy dòng timthumb mà thấy nó ko xuất hiện link hình ảnh ở parameter ở phần src=…. thì nên kiểm tra lại code php của mình, xem nó có vấn đề gì? Debug xem tại sao lại ko ra src hình ảnh.