Home » Làm website bằng wordpress » Timthumb và featured image trong wordpress

Timthumb và featured image trong wordpress

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.

TIMTHUMB.PHP

Đâ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.

6683562063 0329f94451 z Timthumb & featured image trong wordpress

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.

6683660901 e2d68e0e0d z Timthumb & featured image trong wordpress

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" />
TIMTHUMB.PHP & FEATURED IMAGE

6683640595 8e64e06b94 z Timthumb & featured image trong wordpress

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.

functionget_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
functionthumb_img($post_id,$h,$w,$q,$alt){
echo'<img align="middle" src="';
echobloginfo('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= newWP_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; ?>
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
Chúc các bạn thành công!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s