Hướng dẫn resizeimage() trong Template Blogger

Mục đích của việc sử dụng resizeimage()
để giảm kích thước ảnh dư thừa so với khung chứa ảnh, hàm này thường được áp dụng trong theme AMP vì nó không sử dụng js rất tiện lợi.

Kiểm tra lỗi

Bằng cách kiểm tra trên gtmetrix.com
Đây là báo cáo của gtmetrix khi chưa áp dụng (hãy xem tại PageSpeed > Serve scaled images) https://gtmetrix.com/reports/minhquydesign.blogspot.com/mjMXdV8r
Khi đã áp dụng https://gtmetrix.com/reports/minhquydesign.blogspot.com/XpuS04J8

Cú pháp

resizeImage(imgUrl, newSize, optionalRatio)

• imgUrl (bắt buộc) là địa chỉ ảnh cần thay đổi. Có thể sử dụng data:post.thumbnailUrl, data:blog.postImageUrl, data:post.authorPhoto.url, data:post.firstImageUrl, data:post.featuredImage kèm theo tiền tố expr: phía trước.
• newSize (bắt buộc) là kích thước mới của ảnh cần thay đổi
• optionalRatio (có thể có hoặc không) là tỉ lệ của hình ảnh mới

Thay đổi kích thước theo chiều rộng

<img expr:src=’resizeImage(data:post.firstImageUrl, 300)’/>

Thay đổi theo kích thước và tỉ lệ

<!-- image size 300px với tỉ lệ 1:1 -->
<img expr:src=’resizeImage(data:post.firstImageUrl, 300, &quot;1:1&quot;)’/>

<!-- image size 300px với tỉ lệ 4:3 -->
<img expr:src=’resizeImage(data:post.firstImageUrl, 300, &quot;4:3&quot;)’/>

Ví dụ trong Widget Popular Posts

<div class='item-thumbnail'>
<a expr:href='data:post.href'>
<b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 300) : data:post.thumbnail' var='image'>
<amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='90' width='130'/> 
</b:with>
</a>
</div>

Cảm ơn bạn đã xem bài viết Hướng dẫn resizeimage() trong Template Blogger