[Blogger] Blogger Thumbnail và những điều bạn cần biết

Thumbnail theo nghĩa tiếng anh được dịch ra là "ảnh thu nhỏ", thuật ngữ này được sử dụng để chỉ việc xử lý ảnh ra một kích thước nào đó như là một ảnh đại diện cho một bài viết hay một video nào đó, để khi người dùng nhìn vào có thể hình dung ra được bài viết hay đoạn video đó nói về vấn đề gì

Thumbnail không chỉ đơn thuần mang tính chất là một ảnh thu nhỏ, điển hình như ảnh thumbnail trên Youtube, không chỉ là một ảnh mô tả hay đại diện cho một đoạn video mà còn tạo ra sự hấp dẫn khiến người dùng nhìn là đã muốn click vào xem ngay ! Trong bài viết này tôi sẽ cùng các bạn đi tìm hiểu cách tùy chỉnh ảnh thumbnail sao cho tối ưu nhất

Trong cấu trúc JSON của blogger, ảnh thumbnail thường được dùng với bài đăng phổ biến (Popular Post) và bài viết trang index (Auto read more with thumbnail), ảnh thumbnail chỉ được crop lại với kích thước 72 x 72, vì vậy, khi bạn đặt vào 1 khung với css độ rộng cùng chiều cao lớn hơn chắc chắn sẽ bị mờ trông rất khó coi. Với mỗi template blogger hầu như đều áp dụng các thủ thuật để resize kích thước thumbnail cùng với khung để cho ảnh không bị mờ

1. Sử dụng JS

* Với auto read more

+ FORM 1: Cấu trúc dạng

Code JS thay đổi kích thước ảnh sẽ là

$(document).ready(function() {
    $(".block-image .thumb a").attr("style", function(a, b) {
        return b.replace("s72-c", "s1600")
    })
});

+ FORM 2: Cấu trúc dạng

Code JS thay đổi kích thước ảnh sẽ là

$(document).ready(function() {
    $('.block-image .thumb a img').attr('src', function(i, src) {
        return src.replace('s72-c', 's1600');
    });
});

* Với Popular Post

Code thay đổi kích thước mặc định có dạng

$(document).ready(function () {
    $('.PopularPosts img').attr('src', function (i, src) {
        return src.replace('s72-c', 's1600');
    });
});

Trong đó

- Màu đỏ là kích thước bạn muốn thay đổi cho ảnh, blog thường lấy s1600 làm kích thước lớn nhất, thêm -c ví dụ (s120-c) tức ảnh bị crop thành hình vuông, s0 tức kích thước gốc, w140-h90-c tức rộng 140px và cao 90px,... khuyển khích bạn nên lựa chọn wxxx-hxxx-c để tiện đặt chiều rộng và độ cao theo mong muốn của mình

- Màu xanh bạn cần trỏ selector đúng với form trong template của mình, bạn có thể xem cấu trúc trong template hoặc dùng F12 để xem thứ tự nhưng đại đa số template đều sắp xếp như tôi đã trình bày ở trên. Ví dụ với F12

Đến đây bạn mới chỉ xong công đoạn đổi kích thước ảnh, tiếp theo cần căn chỉnh lại css chiều rộng và độ cao để ảnh cover khít với khung, để tránh thay đổi nhiều lần tôi khuyên bạn nên đặt css kiểu như này

Theo đó ví dụ tôi có cấu trúc dạng

Và dùng code js đổi kích thước ảnh dạng

$(document).ready(function() {
    $(".block-image .thumb a").attr("style", function(a, b) {
        return b.replace("s72-c", "w250-h145-c")
    })
});

Thì css sẽ là

Ảnh sẽ nét và vừa với khung css của template, tương tự với Popular Post

<!-- JS -->

$(document).ready(function () {
    $('.PopularPosts img').attr('src', function (i, src) {
        return src.replace('s72-c', 'w125-h85-c');
    });
});

<!-- CSS -->
.PopularPosts .item-thumbnail{
     width: 125px;
     height: 85px;
}
 .PopularPosts .item-thumbnail a img {
     width:100%;
     height:100%;
}

Trông có vẻ loằng ngoằng và đương nhiên bạn cần có 1 chút kiến thức về html, css và js thì sẽ thấy nó dễ hiểu hơn :)

2. Không sử dụng JS

Đây mới là vấn đề trọng tâm tôi muốn trình bày ở bài viết này, vì đơn cử khi dùng cách 1, sau khi bạn load xong ảnh kích thước s72-c thì jquery mới tiến hành resize như vậy sẽ gửi rất nhiều request về server vừa làm chậm quá trình tải trang vừa không hợp lý

Hiện tại blogger đã có hàm hỗ trợ resize ảnh qua thẻ b:with hoặc trực tiếp trong url của ảnh, theo đó ảnh sẽ được load theo kích thước ta chỉ định theo cú pháp sau

resizeImage(url, size, ratio);// đường dẫn của ảnh, kích thước, tỷ lệ

* Với auto readmore

+ Form 1

Bạn sẽ dùng thẻ b:with với biến image để chỉnh sửa lại kích thước như sau

<div class='block-image'>
    <div class='thumb'>
        <b:with value='resizeImage(data:post.thumbnailUrl, 250, &quot;250:145&quot;)' var='image'>
            &lt;a title=&#39;<data:post.title/>&#39; href=&#39;<data:post.url/>&#39; style=&#39;background:url(<data:image/>) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
        </b:with>
    </div>
</div>

Các phần tôi đánh màu giống nhau chắc bạn cũng hiểu được ý tôi muốn nói.

• Màu đỏ tức đường dẫn ảnh phải trùng với đường dẫn ban đầu, blogger template có thể có rất nhiều đường dẫn ví dụ: data:post.thumbnailUrl, data:post.firstImageUrl,data:post.featuredImage... bạn cần chú ý phần này để load đúng thumbnail 
• Màu cam tức độ rộng và tỉ lệ ảnh, theo ví dụ trên ảnh sẽ có độ rộng 250px và tỉ lệ 250:145 tức rộng 250 và cao 145, nếu để 1:1 thì rộng=cao, hoặc bất kì tỉ lệ nào bạn mong muốn
• Màu xanh tức tên biến, do thẻ a nằm trong b:with nên biến image sẽ có tác dụng hay nói cách khác, sau khi resize biến image sẽ được truyền vào cho thẻ a

Sau khi lưu template lại và kiểm tra bạn sẽ thu được kết quả như sau

Hoàn toàn không cần js vẫn giải quyết được bài toán chỉnh sửa kích thước ảnh

+ Form 2

Cũng tương tự thôi, nhưng lần này bạn sẽ áp trực tiếp hàm resize vào đường dẫn ảnh

<div class='block-image'>
    <div class='thumb'>
        <a expr:href='data:post.url'>
         <img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 250, &quot;250:145&quot;)' expr:title='data:post.title'/>
        </a>
    </div>
</div>

Tương tự với Popular Post

<div class='item-thumbnail'>
    <a expr:href='data:post.href'>
        <b:with value='resizeImage(data:post.featuredImage, 140, &quot;140:90&quot;)' var='image'>
             <img border='0' expr:alt='data:post.title' expr:src='data:image'/>
        </b:with>
    </a>
</div>

Về phần css không có gì khác so với phần 1. Nhờ sử dụng cách 2 này, bạn có thể thấy blog của tôi load rất nhanh, dù cho có rất nhiều bài viết và widget Popular Post

Như vậy qua bài viết này, bạn đã biết thêm cho mình 1 phương pháp chỉnh sửa kích thước ảnh thumbnail cho blog. Một điều chú ý nữa là bạn cực kì hạn chế hiển thị bài đăng qua js (auto readmore with js) nên sử dụng autoread more no js để cải thiện hiệu suất website

Do số lượng template và cách trình bày thumbnail phong phú nên tôi không thể bao quá hết được, chỉ tập trung vào trình bày ý tưởng cho bạn hiểu. Nếu bạn gặp khó khăn trong việc này hãy để lại bình luận để chúng ta tìm ra hướng giải quyết tối ưu nhất

Good Luck !