Lấy image theo id và chỉ định kích thước hiển thị trong srcset.

Các ảnh trong wordpress mặc định được lấy bở hàm “wp_get_attachment_image” tại đây ảnh sẽ được lấy ra theo chuẩn html5. nghĩa là các ảnh đều có srcset thuận tiện cho việc load ảnh trên nhiều kích thước màn hành. Tuy nhiên không phải lúc nào ta cũng dùng được điều này.

Ví dụ như 1 ảnh 2000px nằm trong khung 600px thì dù ở trên kích thước màn hình nào ta cũng chỉ cần load tối đa trên dưới 600px có thể lên tới 800px nhưng không cần thiết phải lấy full đến 2000px. Nếu lấy full sẽ gây nặng và làm chậm quá trình tải của website. Tuy nhiên trong wordpress lại mặc định tự sinh ra việc lấy ảnh full thông qua kích thước màn hình lấy trong thuộc tính srcset.

Vì vậy thay vì việc lấy ảnh theo đúng mặc định của WordPress hay phải xử lý ảnh trước khi up lên thì ta nên điều chỉnh lại kích thước ảnh được lấy ra bằng hàm sau.

function get_image($image_id, $default_image = "thumbnail", $alt = "", $class = "", $list_size_image = ["thumbnail", "medium", "medium_large", "large"], $attr = []){
    $image_src = wp_get_attachment_image_src($image_id, $default_image);
    $srcset = "";
    foreach ($list_size_image as $key => $value) {
        $current_image = wp_get_attachment_image_src($image_id, $value);
        $srcset .= $current_image[0]." ".$current_image[1]."w";
        if($key + 1 < count($list_size_image)){
            $srcset .= ', ';
        }
    }
    $image = '<img width="'.$image_src[1].'" height="'.$image_src[2].'" src="'.$image_src[0].'" class="'.$class.'" alt="'.$alt.'" srcset="'.$srcset.'" sizes="(max-width: '.$image_src[1].'px) 100vw, '.$image_src[1].'px">';
    return $image;
}

Để sử dụng nó thì tại các vị trí dùng hàm “wp_get_attachment_image” để lấy ảnh thì có thể thay thế bằng hàm get_image($image_id,…) được khai báo ở trên. Tại đây:

  • $image_id: ID của bức ảnh (attachment id).
  • $default_image: kích thước ảnh mặc định trong thuộc tính src của hình ảnh.
  • $alt: giá trị text được đặt trong thuộc tính alt của ảnh (text hiển thị thay thế khi không có ảnh).
  • $class: các class css đặt trong thuộc tính class của ảnh.
  • $list_size_image: kíck thước mặc định bạn muốn đặt trong thuộc tính secret.

Leave a Reply