Giới thiệu về cơ chế lấy ảnh thu nhỏ của WPLine.

Hiện nay Hutek thấy có khá nhiều bạn chưa biết hoặc chưa hiểu về cách lấy ảnh thu nhỏ (thumbnail) của hai theme do Hutek làm là WPLine và Webzine, thế nên hôm nay Hutek viết một bài chi tiết nói về cách lấy ảnh của cũng như hướng dẫn thực hành để các bạn có thể dễ dàng hơn trong việc sử dụng theme của Hutek.

Về hàm lấy ảnh này thì cũng có khá nhiều thăng trầm, bởi vì các theme của Hutek làm đều có xu hướng trang tin và cũng bởi vì hình ảnh ngày càng quan trọng hơn trong các bài viết nên ngay từ phiên bản đầu tiên của Webzine Hutek đã tích hợp chức năng hiện ảnh vào bài viết bằng cách sử dụng custom field. Đây có lẽ là phương pháp thô sơ và cổ truyền nhất trong việc tạo ảnh thu nhỏ để minh họa cho bài viết, tuy nhiên phương pháp này khá là khó với các bạn mới làm quen với Wordpress, thế là Hutek tiếp tục cải tiến và trong phiên bản 0.3 của Webzine Hutek dùng plugin Get the Image của Justin Tadlock kết hợp với phpThumb để tạo ảnh. Về cơ chế thì Get the Image sẽ làm nhiệm vụ tìm ảnh còn phpThumb sẽ làm nhiệm vụ resize ảnh, nhưng sự kết hợp này cũng có khá nhiều bất tiện. Thế nên trong phiên 1.0 của Webzine Hutek đã tự viết làm lấy ảnh để có thể phù hợp nhất với yêu cầu của mình. Tất nhiên là những theme sau này của mình đều sử dụng cơ chế lấy ảnh này (bao gồm WPLine, New Wind và các theme sắp phát hành)

Và trong bài viết này Hutek sẽ nói về hàm lấy ảnh này và cách thức thực hiện đối với WPLine cũng như Webzine.

Về cơ chế lấy ảnh thì đây là sự kết hợp của hàm lấy ảnh do Hutek viết (sau khi đã tham khảo nhiều hướng dẫn và tài liệu) kết hợp với phpThumb để tạo ảnh thu nhỏ, các bạn có thể tìm thấy đoạn code này trong file functions.php, toàn bộ hàm như sau:

 /********************************************************************
Get image attach
********************************************************************/
function img($width,$height) {
	global $post;
	$custom_field_value = get_post_meta($post->ID, 'in_image', true);
	$custom_field_value_2 = get_post_meta($post->ID, 'out_image', true);
	$attachments = get_children( array('post_parent' => $post->ID, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'numberposts' => 1) );
	if ($custom_field_value == true) {
	$img_url = parse_url($custom_field_value,PHP_URL_PATH);
	print '<img src="'.get_template_directory_uri().'/phpthumb/phpThumb.php?src='.$img_url.'&amp;w='.$width.'&amp;h='.$height.'&amp;zc=T&amp;q=70" alt="'.$post->post_title.'" />';
	}
	elseif ($custom_field_value_2 == true) {
	print '<img src="'.$custom_field_value_2.'" alt="'.$post->post_title.'" />';
	} 
	elseif ($attachments == true) {
		foreach($attachments as $id => $attachment) {
		$img = wp_get_attachment_image_src($id, 'full');
		$image = $image[0];
		$img_url = parse_url($img[0], PHP_URL_PATH);
		print '<img src="'.get_template_directory_uri().'/phpthumb/phpThumb.php?src='.$img_url.'&amp;w='.$width.'&amp;h='.$height.'&amp;zc=T&amp;q=70" alt="'.$post->post_title.'" />';
		}
	}
	else {
		$img = get_template_directory_uri();
		$img_url = parse_url($img,PHP_URL_PATH);
		print '<img src="'.get_template_directory_uri().'/phpthumb/phpThumb.php?src='.$img_url.'/images/no_image.jpg&amp;w='.$width.'&amp;h='.$height.'&amp;zc=T&amp;q=70" alt="'.$post->post_title.'" />';
	}
}

Như các bạn thấy hàm này chỉ có hai biến là chiều dài và chiều rộng và sử dụng hàm if để xét các trường hợp lấy ảnh.

Nhìn vào code có thể thấy là trường hợp ưu tiên đầu tiên là ảnh dùng Custom Field có tên là in_image. In_image là trường hợp dùng cho việc hiển thị ảnh bất kỳ nằm trên host của blog. Ưu điểm của cách này là bạn không cần up thêm ảnh mà có thể tái sử dụng ảnh trên host và ảnh có thể resize được với phpThumb.

Tiếp theo hàm sẽ ưu tiên đến custom field có tên là out_image. Out_image là trường hợp dùng cho việc hiển thị ảnh bất kỳ nhưng không nằm trên host của bạn. Ưu điểm của cách này là ảnh của bạn không cần phải lưu trữ trên host còn nhược điểm là ảnh không thể resize bằng phpThumb.

Nếu cả hai trường hợp trên không xảy ra thì hàm tiếp tục tìm kiếm xem trong bài viết có ảnh nào được up lên không, nếu có nó sẽ tự động lấy ra ảnh đầu tiên và resize theo kích thước đã được định trước. Đây cũng là cách đơn giản và dễ nhất để tạo thumb cho bài viết, chỉ cần up ảnh cho bài viết còn các việc khác ko cần quan tâm.

Trường hợp cuối cùng xảy ra khi quét ảnh mà cũng ko có thì hàm sẽ tự động hiện thị một hình ảnh mặc định (no_image.jpg) để thông báo cho người dùng biết là chưa có ảnh.

Đó là 4 cách lấy ảnh của WPLine 1.0 và Webzine 1.0. Trong quá trình sử dụng có thể xảy ra các lỗi lấy ảnh, thường nó sẽ là các ảnh nền màu tím và một hàng chữ đỏ thông báo, nếu xảy ra trường hợp này thì có thể là do một số nguyên nhân như:
- Ảnh không còn tồn tại trên host
- Host không hỗ trợ module GD để phpThumb có thể size ảnh (rất hay xảy ra với các host free)
- Nguyên nhân khác (cần phải xem xét trực tiếp mới xác định được)

Như đã trình bày ở trên thì trong 4 trường hợp lấy ảnh thì sẽ có hai trường hợp dùng custom field nên Hutek hướng dẫn luôn cách dùng để những ai mới làm quen với Wordpress cũng có thể dễ dàng thực hiện.

Thực ra nó khá đơn giản. Các bạn chỉ cần vào phần viết bài mới, tìm đến chỗ custom field, nếu là lần đầu dùng thì chúng ta phải tạo một custom field với tên mà chúng ta muốn (trong trường hợp này là in_image và out_image) ở phần name còn giá trị thì là link ảnh giống như hình minh họa dưới đây

Còn các lần sau thì các bạn chỉ việc chọn một custom field đã có sẵn và điền giá trị vào thôi.

Trên đây Hutek đã trình bày khá chi tiết về cách thức lấy ảnh của WPLine 1.0 và Webzine 1.0 cũng như cách thực hiện. Hy vọng là bài viết sẽ giúp các bạn hiểu hơn và vận dụng tốt hơn các theme của Hutek.