Các cách lấy ảnh đại diện (thumbnail) trong wordpress

25/05/2015 04:06 9219

Hôm nay tôi sẽ chia sẽ với anh/chị về các cách lấy ảnh đại diện trong wordpress

Ảnh đại diện hay thường gọi là thumbnail thì dùng để làm ảnh thu nhỏ của một bài viết khi show bài viết dưới dạng desc (mô tả ngắn, giống như các trang tin thường hay làm) và trong wordpress thì có 3 cách để chúng ta lấy ảnh làm đại diện:

Ảnh được set là featured image

Trong wordpress đã có support việt set ảnh làm đại diện qua chức năng featured image. Việt lấy nó như thế nào ngay sau đây tôi sẽ chia sẽ với anh chị

Trước tiên anh chị muốn resize kích thước lại đúng không nào. Để resize anh/chị dùng function sau:

add_image_size( 'shopviet-smallimage', 80, 80, TRUE );

1	add_image_size( 'shopviet-smallimage', 80, 80, TRUE );

Ở ví dụ trên tôi đã khai báo một kích thước resize là 80px X 80px để làm ảnh đại diện. Khi anh chị upload một image có kích thước lơn ví dụ 1024px X 768px thì nó sẽ tự động crop ra một image có size là 80px X 80px

Giờ là việt gọi nó ra nơi bạn cần lấy:

<?php echo get_the_post_thumbnail(get_the_ID(), 'shopviet-smallimage' ); ?>

1	<?php echo get_the_post_thumbnail(get_the_ID(), 'shopviet-smallimage' ); ?>

Các bài viết khác có thể hữu ích với bạn

Ảnh trong gallery mỗi post

Có nghĩa là khi người quản trị upload image lên chỉ insert image vào bài viết mà không set featured image (Anh chị lưu ý đây là trường hợp upload image đối với việc new post hiện hành nha, nếu người quản trị upload ở thư việt media hoặc ở một post khác rồi sau đó mới insert vào new post=>thì new post sẽ có image insert vào nhưng không có image nào trong gallery của post)

Chúng ta sẽ lấy image đầu tiên trong gallery để làm ảnh đại diện:

Tôi đã viết sẵn một function để làm việc này hi vọng giúp ích được anh/chi

function the_get_first_image_in_gallery($post_id,$size){
	global $wpdb;
	$mediumSRC ='';
	$args = array( 'post_parent' => $post_id , 'numberposts' => 1, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'DESC', 'orderby' => 'ID', 'post_status' => null );
	
				$attachments = get_posts( $args );
				foreach ( $attachments as $attachment ) {
					$attachmentArray = wp_get_attachment_image_src( $attachment->ID, $size );
					$caption = $wpdb->get_row("select * from $wpdb->posts where `ID` = '{$attachment->ID}'");//var_dump($attachmentArray);
					$width = $attachmentArray[1];
					$height = $attachmentArray[2];
					 if ( $attachmentArray ) {
						  $mediumSRC = $attachmentArray[0];
						  if ( trim( $mediumSRC != '' ) ) {
						    $mediumSRC;
					 	}
					 }
				}
		?>
        <img width="<?php echo $width; ?>" height="<?php echo $height; ?>" src="<?php echo $mediumSRC; ?>" class="attachment-<?php echo $size; ?> wp-post-image" alt="<?php echo $caption->post_excerpt; ?>" />
        <?php
		return;
}

function the_get_first_image_in_gallery($post_id,$size){

global $wpdb;

$mediumSRC ='';

$args = array( 'post_parent' => $post_id , 'numberposts' => 1, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => 'DESC', 'orderby' => 'ID', 'post_status' => null );

$attachments = get_posts( $args );

foreach ( $attachments as $attachment ) {

$attachmentArray = wp_get_attachment_image_src( $attachment->ID, $size );

$caption = $wpdb->get_row("select * from $wpdb->posts where `ID` = '{$attachment->ID}'");//var_dump($attachmentArray);

$width = $attachmentArray[1];

$height = $attachmentArray[2];

if ( $attachmentArray ) {

$mediumSRC = $attachmentArray[0];

if ( trim( $mediumSRC != '' ) ) {

$mediumSRC;

}

<img width="<?php echo $width; ?>" height="<?php echo $height; ?>" src="<?php echo $mediumSRC; ?>" class="attachment-<?php echo $size; ?> wp-post-image" alt="<?php echo $caption->post_excerpt; ?>" />

<?php

return;

}

Ảnh không thuộc 2 trường hợp trên (có insert vào post nhưng không có trong gallery, ảnh link từ nới khác tới bài viết)

Trường hợp này bất đắt dĩ bởi chúng ta sẽ resize theo kiểu ảo có nghĩa là set một trong hai cái style=”width:80px;height:auto;” hoặc ngược lại style=”width:auto;height:80px” và nó sẽ sẽ có các nhược điểm là tốc độ load page sẽ chậm lại do image resize ảo và resize không đúng theo yêu cầu ví dụ một image có size 1024px x 768px thì nó sẽ resize không đúng hình vuông (theo yêu cầu của chúng ta).Tôi đã viết sẵn một function để làm điều này:

//lay anh dieu tien lam thumbnail
function get_first_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = false;
}

//lay anh dieu tien lam thumbnail

function get_first_image() {

global $post, $posts;

$first_img = '';

ob_start();

ob_end_clean();

$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);

$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image

$first_img = false;

}

4.8/5 (16 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Phân trang paginate cho wp_query wordpress [ 18/09/2022 14:17 ]
Function ghi vào file debug wordpress write log [ 16/09/2022 02:24 ]
Code bắt đầu viết một plugin [ 08/04/2022 09:54 ]
Get all current post type in wordpress website [ 11/08/2021 15:23 ]
Tạo child theme wordpress [ 09/05/2021 07:58 ]
2 cách để code login wordpress [ 22/03/2021 09:36 ]
Cho phép upload các loại file khác trong wordpress [ 24/09/2020 09:00 ]
Disable update wordpress core, plugin and theme [ 02/09/2020 01:19 ]
Wp_query cho woocommerce (wp_query for woocommerce) [ 18/08/2020 09:14 ]
Ajax wordpress cơ bản (basic ajax wordpress) [ 18/08/2020 07:21 ]

Các cách lấy ảnh đại diện (thumbnail) trong wordpress

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)