Thumbnail và thay đổi kích thước hình giảm dung lượng trong blogger ~ blog chia sẻ kiến thức lập trình

Bạn để ý sẽ thấy những hình thu nhỏ ở mục bài viết gần đây hay mục liệt kê danh sách bài viết chất lượng hơi thấp hơn so với hình thật trong bài. Chúng cũng được load nhanh hơn. Làm sao được như vậy?

Ví dụ dễ hiểu nhất chính là cái hình mẫu cho bài viết này, hình thumbnail của nó chỉ có kích thước 72×72 và có địa chỉ như dưới đây (bạn cần kéo về cuối đường link để xem)

1
2
3
http://2.bp.blogspot.com/-dsrcj7CZfa0/VWIZSkmp2kI/AAAAAAAANHA/mA9-ePVPppA/s72-c/cup.jpg

Tuy nhiên hình gốc của nó là hình có địa chỉ dưới đây (cùng địa chỉ với ở trên, chỉ khác đôi chút là không cós72-c trong đường link)

1
2
3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWQtxlnJVrjkEnXC5ko_O152LNQFlGaWBefM9mitm2cRBtH__Lcn2p7z1RZ4eeH-H-u4e5q1xeSbjRIdVjnLZ7XhcNBovzClWRgYyHwtnnMMyoeHuTd5bwmxO0U2ApXfRACc4rDdqt5E/

Còn đây là chất lượng tốt hơn nếu tôi thay bằng con số 300 thay vì 72.

1
2
3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQWQtxlnJVrjkEnXC5ko_O152LNQFlGaWBefM9mitm2cRBtH__Lcn2p7z1RZ4eeH-H-u4e5q1xeSbjRIdVjnLZ7XhcNBovzClWRgYyHwtnnMMyoeHuTd5bwmxO0U2ApXfRACc4rDdqt5E/s300-c/cup.jpg

Ở trên, “-c” cho biết hình sẽ bị cắt đi để kích thước của nó là một hình vuông. Nếu loại bỏ nó thì hình sẽ giữ nguyên tỉ lệ dài x rộng ban đầu.

Câu hỏi đặt ra là bây giờ bạn muốn thay đổi kích thước của thumbnail trong trang web của bạn thì phải làm sao? Ví dụ như bạn thấy chúng quá nhỏ hoặc quá to. Câu trả lời là chúng ta sẽ viết một đoạn JavaScript để thay thế con số 72 đang có thành bất cứ số nào mà bạn muốn.

Lưu ý rằng, đa phần các template đề chỉnh kích thước thumbnail về 72×72 nhưng đó không phải là chuẩn, để chắc chắn về kích thước hiện có của thumbnail, bạn cần dùng Firebug để xem đường link chính xác của hình, nếu trong đường link đó có chứa s72 thì chính là nó. Nếu là một con số khác thì bạn cần ghi nhớ con số này.

Bước 1. Vào phần chỉnh sửa mẫu HTML

Bước 2. Tìm đến đoạn code có chứa expr:src='data:post.thumbnail' (hoặc chỉ cầndata:post.thumbnail thôi). Bạn sẽ tìm được rất nhiều kết quả, sang bước 3.

Bước 3. Xác định vị trí của cái thumbnail mà bạn cần thay đổi kích thước. Nó có thể là thumbnail của widget bài đăng gần đây, cũng có thể là thumbnail chung của cả trang web hoặc một tiện ích nào đó tuỳ thuộc vào từng giao diện.

Bước 4. Sau khi xác định được vị trí đó rồi, hãy thêm vào một class với một tên nào đó, ví dụ nhưresizethumbnail. Mục đích là để bước tiếp theo, mình sẽ dùng đoạn JS để tìm đến chỗ này và thay thế con số 72 bằng con số khác.

Bước 5. Tìm đến thẻ <body> và dán đoạn code sau TRƯỚC nó

1
2
3
4
5
<script type='text/javascript'>
 $(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});});
</script>

Bước 6. Nếu bạn muốn khôi phục kích thước ban đầu cho ảnh, dùng đoạn code sau

1
2
3
4
5
<script type='text/javascript'>
 $(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's1600' );});});
</script>

Bước 7. Lưu mẫu lại.

Bài viết tham khảo từ hai trang tudor-anhelina và helparchive. Hình ảnh đầu bìa từ trang FreePik.