[WP Tip] Timthumb & featured image

• January 19, 2012
• 27 comments

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){
$img_id = get_post_thumbnail_id($post_id); // lấy id của hình
$images=wp_get_attachment_image_src( $img_id, false, false ); // lấy link hình featured
return $images[0]; // 0: link hình ; 1: width ; 2: height
}

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