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.

Related posts

1. Giới thiệu VPress Beta Xin chào các ban! Như đã hẹn, hôm nay Hutek...
2. Giới thiệu chung về Magento Magento là một mã nguồn mở giúp tạo các trang...
3. Sắp xuất hiện WPLine theme Có lẽ các bạn sẽ khá bất ngờ khi đọc...

• Viết lại theo đúng chuẩn XHTML và CSS: điều này cũng góp phần làm tăng đáng kể hiệu năng của theme.
• Hệ thống comment mới sáng sủa hơn,  khoa học hơn
• Hỗ trợ Multi language theo đúng chuẩn của WordPress (có file lang riêng) để các bạn có thể Việt hóa theo ý thích của mình, để việt hóa được các bạn vui lòng đọc bài viết này
• Tích hợp sẵn một số Widget (bắt đầu bằng Hutek Webzine)
• Bổ sung thêm các hiệu ứng chuyển động cho phần banner (3 widget banner)
• Thực hiện các tối ưu về hiệu năng: bật gzip, minified js, combine js, config etag …
• Và còn nhiều thay đổi nữa mà Hutek sẽ cập nhật trong Hướng dẫn sử dụng (rất tiếc là vì lý do thời gian nên Hutek chưa thể làm kịp Hướng dẫn cho 1.0 nhưng sẽ có bài hướng dẫn config những phần khó nhất)

Download và demo cho Webzine 1.0
Note: There is a file embedded within this post, please visit this post to download the file.
Demo

Còn dưới đây là một số hình ảnh của Webzine 1.0

Related posts

1. Chính thức phát hành Hutek Webzine 0.2 Tất cả những gì muốn nói Hutek đã thể hiện...
2. Hutek Webzine 0.3 – Đơn giản hơn, mạnh mẽ hơn Xin chào tất cả các bạn! Như  đã nói,...
3. Hutek Webzine | For a new vision Với vốn hiểu biết và lòng đam mê với WP,...

Tại sao lại phải viết lại? Đơn giản là vì Webzine sẽ bước sang một giai đoạn mới và cần một sự ổn định cần thiết, sau khi nghiên cứu thì Hutek quyết định viết lại toàn bộ code nhằm tối ưu toàn bộ theme cũng như sửa chữa triệt để các lỗi do người dùng phát hiện. Hiện tại phiên bản 1.0 đang được chạy trên Hutek.info.

Việc viết lại code lần này đã giải quyết được các vấn đề sau:

• Code đạt chuẩn xhtml và css
• Tối ưu các thành phần theo Yslow(theme trắng có thể đạt đến 80/99 điểm), gzip cho tất cả các thành phần cùng một số tối ưu giúp theme load nhanh nhất.
• Bớt cồng kềnh hơn trước rất nhiều (ít thư mục hơn, css chỉ có một file, code gọn gàng)
• Giải quyết triệt để các lỗi quan trọng như: lỗi không hiện ảnh khi cài trên subdomain, lỗi không hiện top category, các lỗi về css …
• Đưa vào hệ thống comment mới có cấu trúc dạng cây giúp dễ dàng theo dõi comment, avatar to tát, tạo sự khác biệt so với các blog khác (Hutek rất thích hệ thống comment mới), ngoài ra hệ thống comment còn  hiển thị như  nhau trên mọi trình duyệt (kể cả ie 6)
• Viết lại function tạo ảnh thumbnail, có hỗ trợ lấy ảnh từ bên ngoài
• Đơn giản hóa hơn nữa phần quản trị, webzine sẽ phát triển theo hướng Widget, có nghĩa là sẽ tích hợp các thành phần dưới dạng các widget, hiện tại Webzine đã tích hợp được các widget như: banner widget,recent  comment widget, latest news widget …
• Webzine sử dụng duy nhất một thư viện javascript là jquery cho việc tạo các hiệu ứng.
• Thêm các hiệu ứng cho các vị trí banner (do thấy nhiều bạn yêu cầu).
• Đồ họa đơn giản, sắc nét hơn
• Thêm một layout cho phần Center Category (chính là phần Thế giới wordpress của Hutek.info)
• Và còn nhiều thay đổi nhỏ khác …

Với mong muốn phiên bản 1.0 hoàn hảo nhất, ít lỗi nhất, đúng ý người dùng nhất nên Hutek viết bài này để các bạn yêu mến Webzine có những đóng góp, nhận xét cho phiên bản 1.0.

Mọi đóng góp của các bạn luôn được hoan nghênh và Hutek sẽ xem xét mọi ý kiến, nếu hợp lý sẽ tích hợp vào phiên bản mới.

Demo cho 1.0 chính là hutek.info

Chân thành cám ơn !

Hutek

Related posts

1. Hutek Webzine 1.0 – Hoàn toàn mới Chào tất cả các bạn! Hôm nay Hutek rất vui...
2. Hutek Webzine 0.3 – Đơn giản hơn, mạnh mẽ hơn Xin chào tất cả các bạn! Như  đã nói,...
3. Chính thức phát hành Hutek Webzine 0.2 Tất cả những gì muốn nói Hutek đã thể hiện...

Như  đã nói, hôm nay Hutek rất vui khi được giới thiệu phiên bản 0.3 của Webzine. Đây là một phiên bản có rất nhiều thay đổi, đặc biệt là phần quản trị theme.

Những thay đổi lớn có thể kể đến như:

• Thiết kế lại giao diện phần quản trị (cực đơn giản và trực quan)
• Bổ sung chức năng tự động tạo ảnh minh họa cho bài viết
• Thêm một layout cho bài viết tiêu biểu (cực kool)
• Không còn giới hạn số lượng thư mục của top categories, main categories, bottom categories

Rất tiếc do thời gian có hạn và cũng một phần Hutek không lường hết được sự phức tạp khi sửa lại phần quản trị nên đã có sự chậm trễ và một số tính năng chưa tích hợp kịp, phần user guide cũng chưa sửa được mong mọi người thông cảm. Nếu có thắc mắc cứ comment tại bài viết này nhé

Demo: http://webzine.hutek.info

Update

Hutek sẽ tập hợp các lỗi phát sinh và sẽ fix vào cuối tuần này

1. 23h25′ ngày 01/06/2009: Hiện tại tab misc đang có lỗi trùng title, phần google custom search phía trên chính là nơi để code của Google analytics

Related posts

1. Hutek Webzine 1.0 – Hoàn toàn mới Chào tất cả các bạn! Hôm nay Hutek rất vui...
2. Chính thức phát hành Hutek Webzine 0.2 Tất cả những gì muốn nói Hutek đã thể hiện...
3. Hutek Webzine | For a new vision Với vốn hiểu biết và lòng đam mê với WP,...

nhiều ko đếm được

Related posts

1. 10 lý do để bạn sử dụng Webzine Theme Options mạnh  với giao diện trực quan Có...
2. Chrome 3 chính thức phát hành với nhiều cải tiến Cuộc chiến trình duyệt đang ngày càng trở nên nóng...
3. Những bài hướng dẫn hay nhất về thiết kế giao diện web 2009 2009 đã trôi qua và đã có rất nhiều bài...

Có thể bạn chưa sử dụng Webzine, có thể bạn chưa đọc help nhưng Hutek sẽ đưa ra cho bạn 10 lý do nếu như bạn còn đang lưỡng lự

1. Theme Options mạnh  với giao diện trực quan
2. Có thể bật/tắt các vùng trên trang chủ  dễ dàng
3. Hỗ trợ Widget tại nhiều vị trí
4. Hiển thị tốt tiếng Việt trên mọi trình duyệt
5. Tương thích tốt với các trình duyệt phổ biến
6. Hỗ trợ kịp thời
7. Hướng dẫn chi tiết
8. Tối ưu cho quảng cáo
9. Phù hợp cho nhiều mục đích (từ blog tin tức đến blog cá nhân)
10. Và đặc biệt là Free Forever ^_*

Related posts

1. Chính thức phát hành Hutek Webzine 0.2 Tất cả những gì muốn nói Hutek đã thể hiện...
2. Đã đến lúc không cần hỗ trợ IE6 nữa Câu hỏi đầu tiên mà tôi muốn hỏi các bạn...
3. Góp ý cho Webzine 1.0 Thế là Webzine cũng đi được một chặng đường, dù...

Demo

Cấu trúc webzine

File mà các bạn download về sẽ có cấu trúc như sau:
1. Plugins (bạn hãy tải lên thư mục plugins của blog, đây là những plugin đã được nhúng sẵn vào trong Webzine, các bạn chỉ cần active là plugin sẽ hiển thị trên trang chủ )

• Get recent comments
• Query Post Widget
• WP Page Navigation
• WP Post View
• WP Poll

2. Webzine (thư mục này các bạn tải lên folder theme của blog nhé)

• Core: chứa các thành phần chính của Webzine
• Style1: chứa các tài nguyên cho style đầu tiên của webzine
• Các file: index.php ….

3. Resource

• Chứa file psd của logo và font

4. Hướng dẫn sử dụng Webzine V 0.2

Chính file hướng dẫn này làm cho dung lượng của Webzine lần này lên tới 2.3Mb, chứ thực ra Webzine chỉ khoảng hơn 450Kb thôi

Related posts

1. Hutek Webzine chính thức phát hành Sau một thời gian phát triển và kiểm nghiệm, cùng...
2. Chính thức phát hành WPLine 1.0 Chào các bạn! Hôm nay Hutek rất vui khi...
3. Chính thức phát hành VPress 1.0 Như đã hứa với anh em, hôm nay đúng ngày...

Webzine đã chính thức ra mắt phiên bản 0.1

Và được chính thức phát hành vào ngày hôm nay.

Vì là phiên bản đầu tiên nên chắc chắn không tránh khỏi thiếu sót, mong được sự góp ý từ mọi người.

Để biết thêm thông tin về theme vui lòng click vào đây

Để đưa ra các góp ý và đề nghị vui lòng truy cập:

http://hutek.info/2009/03/06/hutek-webzine-for-a-new-vision/

http://hutek.uservoice.com/

Live demo:  http://webzine.hutek.info/

Related posts

1. Chính thức phát hành Hutek Webzine 0.2 Tất cả những gì muốn nói Hutek đã thể hiện...
2. WordPress 3.0 “Thelonious” đã chính thức phát hành Vậy là sau 3 phiên bản RC thì cuối cùng...
3. Chính thức phát hành WPLine 1.0 Chào các bạn! Hôm nay Hutek rất vui khi...