Tìm hiểu thuộc tính 'width, 'height' của thẻ dữ liệu hình ảnh bài viết blogspot

Thẻ dữ liệu hình ảnh bài viết của tiện ích bài đăng trên blog version 2 được thêm hai thuộc tính cho kích thước rộng và cao nếu ảnh đầu tiên của bài đăng được tải lên có link từ server Blogger và được đề cập rõ ràng thuộc tính width, height trong thẻ <img>

Chỉ định kích thước ảnh cụ thể trong thuộc tính width/height

Cụ thể, khi xuất bản bài đăng với ảnh đầu tiên được tải lên nếu bạn chỉ định chiều rộng và chiều cao bằng kích thước cụ thể, bạn sẽ trích xuất được thuộc tính width/height của ảnh. Lấy một ví dụ với ảnh đầu tiên của bài viết

<img border="0" width="247" height="165" data-original-width="640" data-original-height="429" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvcCP1N0vOYoN0HXhQB93cCCOyy50zcO7s9pNEB_RZ08DQ2tPHX8TCIupPeuqIXXCYj7FIZhSJo3Ig7Ndw4cc2pz3TAAy7hXSoa1hh29RZtSxE-uVD-trPJZXMbBaH6kwqlZTfuX0MDln6/s1600/2020-03-03_14-40-29.webp" />

Tham khảo thêm: Hai phương pháp hay giúp tối ưu pagespeed cho trang bài viết blogspot

Hai kích thước mình chỉ định cho chiều rộng: 247, chiều cao: 165 cho ảnh, để lấy kích thước ảnh cho thẻ dữ liệu ảnh data:post.featuredImage bên ngoài các trang chỉ mục, mình thêm width và height đằng sau thẻ dữ liệu của ảnh.

<img expr:alt='data:post.title' width='data:post.featuredImage.width' height='data:post.featuredImage.height' expr:src='data:post.featuredImage' />

Khi trích xuất HTML của ảnh có dạng:

<img width="247" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvcCP1N0vOYoN0HXhQB93cCCOyy50zcO7s9pNEB_RZ08DQ2tPHX8TCIupPeuqIXXCYj7FIZhSJo3Ig7Ndw4cc2pz3TAAy7hXSoa1hh29RZtSxE-uVD-trPJZXMbBaH6kwqlZTfuX0MDln6/s1600/2020-03-03_14-40-29.webp" title=""/>

Nếu bạn không thêm thuộc tính width/height trong ảnh đầu tiên bài viết hoặc không chỉ định kích thước cụ thể thì các kích thước bên trong thuộc tính width/height của thẻ dữ liệu ảnh bên ngoài trang chỉ mục sẽ bị rỗng với width="" height="".

Để thuộc tính width/height không bị rỗng khi quên không thêm trong ảnh đầu tiên bài viết ta thêm điều kiện chỉ định một kích thước cụ thể nếu thuộc tính bị rỗng hoặc bài không có ảnh

<img expr:width='data:post.featuredImage.width ? data:post.featuredImage.width : "247"' expr:height='data:post.featuredImage.height ? data:post.featuredImage.height : "165"' expr:src='data:post.featuredImage ? data:post.featuredImage : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s247/safe_image.png"' />

Tham khảo thêm: Cách sử dụng toán tử điều kiện trong Blogger

Ngoài ra Blogger cũng có thẻ hình ảnh cho thẻ iframe với link được nhúng từ Youtube, nhưng không trích xuất được thuộc tính width/height, do vậy bạn phải chỉ định một kích thước trong thuộc tính.

<img expr:alt='data:post.title' width='165' height='247' expr:src='data:view.featuredImage.youtubeMaxResDefaultUrl' />

Viết đầy đủ điều kiện với ảnh đầu tiên và thẻ iframe thay thế nếu nó được đặt trước ảnh

<b:if cond='data:post.featuredImage.isYouTube'>

  <img expr:alt='data:post.title' width='165' height='247' expr:src='data:view.featuredImage.youtubeMaxResDefaultUrl' />

<b:elseif cond='data:post.featuredImage'/>

  <img expr:alt='data:post.title' expr:width='data:post.featuredImage.width ? data:post.featuredImage.width : "247"' expr:height='data:post.featuredImage.height ? data:post.featuredImage.height : "165"' expr:src='data:post.featuredImage' />

<b:else/>

 <img expr:alt='data:post.title' width='165' height='247' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/s247/safe_image.png' />

</b:if>

Bài tham khảo: Tạo thẻ đánh dấu mặc định chung cho tiện tích Bài đăng trên Blog và Bài đăng phổ biến

Ngoài ra bạn có thêm tùy chọn với hàm thay đổi kích thước ảnh resizeImage, để thay đổi tất cả kích thước ảnh đều nhau với cấu trúc như sau:

<b:eval expr='resizeImage(thẻ dữ liệu ảnh,kích thước chỉ định,"tỷ lệ hoặc kích thước width:height")'/>

Ví dụ thay đổi ảnh theo tỷ lệ 16:9, 4:3...

<img expr:alt='data:post.title' width='247' height='165' expr:src='resizeImage(data:post.featuredImage,247,"16:9")' />

Thay đổi ảnh theo kích thước width:height

<img expr:alt='data:post.title' width='247' height='165' expr:src='resizeImage(data:post.featuredImage,247,"247:165")' />

Vì bạn đã sử dụng hàm thay đổi kích thước với một kích thước cụ thể cho nên bạn chỉ định luôn thuộc tính width/height bằng kích thước theo kích thước bạn sử dụng resize

Tham khảo thêm: Cách sử dụng thẻ b:tag trong blogspot

Cuối cùng, bạn lại có thêm điều kiện trang tải trên mobile, vì trên điện thoại màn hình kích thước nhỏ thông dụng 480px trở xuống ảnh bị thu nhỏ lại theo tỷ lệ màn hình hiển thị thì lúc này kích thước ảnh sẽ bị du thừa làm tăng kích thước trang.

Lấy ví dụ ảnh trên máy tính có kích thước chiều rộng: 247, chiều cao: 165 nhưng trên điện thoại ảnh chỉ cần kích thước chiều rộng: 154, chiều cao: 102

Tổng hợp nếu sử dụng thêm điều kiện trang tải trên mobile để lấy kích thước ảnh nhỏ hơn, mình sẽ viết như sau:

<b:if cond='data:post.featuredImage.isYouTube'>

  <img expr:alt='data:post.title' expr:src='!data:blog.isMobileRequest ? resizeImage(data:view.featuredImage.youtubeMaxResDefaultUrl,247,"247:165") : resizeImage(data:view.featuredImage.youtubeMaxResDefaultUrl,154,"154:102")' expr:height='!data:blog.isMobileRequest ? "165" : "102"' expr:width='!data:blog.isMobileRequest ? "247" : "154"' />

  <b:elseif cond='data:post.featuredImage'/>

    <img expr:alt='data:post.title' expr:src='!data:blog.isMobileRequest ? resizeImage(data:post.featuredImage,320,"247:165") : resizeImage(data:post.featuredImage,154,"154:102")' expr:height='!data:blog.isMobileRequest ? "165" : "102"' expr:width='!data:blog.isMobileRequest ? "247" : "154"'  />

  <b:else/>

    <img expr:alt='data:post.title' expr:src='!data:blog.isMobileRequest ? "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/w247-h165-p-k-no-nu/safe_image.png" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDCQEJLNSjdH72adB-jqpwZgpHO6y2n2TclnA0zQ_QTIStsTqoyDS_JbiAhFYgagHd9SxrvA7OL1DvtxTboBVjt_IMbI0iBUcn9zErpSr8taldp_m1YaYuZutfgh0a0Sc2cI-1LHLTc8kp/w154-h102-p-k-no-nu/safe_image.png"' expr:height='!data:blog.isMobileRequest ? "165" : "102"' expr:width='!data:blog.isMobileRequest ? "247" : "154"'  />

</b:if>

Đón xem bài sau: Thêm thuộc tính lazy loading trì hoản tải ảnh và iframe cho trang blogspot