Thứ Năm, 17 tháng 5, 2018

XEM BÀI VIÊT
TOÀN MÀN HÌNH

Code Tùy Biến Thumbnail Cho Blogspot

1. Sử dụng JS

* Với auto read more

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

<div class='block-image'>
    <div class='thumb'>
        <a href='#' style='background:url(xxx) no-repeat center center;background-size:cover'></a>
    </div>
</div>

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

<div class='block-image'>
    <div class='thumb'>
        <a href='#' >
          <img src="xxx"/>
        </a>
    </div>
</div>

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

.div_cha{
     width:xxx px;
     height:xxx px;
}
 .div_cha .div_con{
     width:100%;
     height:100%;
}
 .div_cha .div_con a{
     width:100%;
     height:100%;
}
 .div_cha .div_con a img{
     width:100%;
     height:100%;
}

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

<div class='block-image'>
    <div class='thumb'>
        <a href='#' style='background:url(xxx) no-repeat center center;background-size:cover'></a>
    </div>
</div>

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à

.block-image{
     width:250px;
     height:145px;
}
.block-image .thumb{
     width:100%;
     height:100%;
}
.block-image .thumb a{
     width:100%;
     height:100%;
}

Ả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

<div class='block-image'>
    <div class='thumb'>
        &lt;a title=&#39;<data:post.title/>&#39; href=&#39;<data:post.url/>&#39; style=&#39;background:url(<data:post.thumbnailUrl/>) no-repeat center center;background-size:cover&#39;&gt;&lt;/a&gt;
    </div>
</div>

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

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

<div class='block-image'>
    <div class='thumb'>
        <a expr:href='data:post.url' expr:title='data:post.title'>
           <img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/>
        </a>
    </div>
</div>

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 !
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
- Email: lephuocsinh96@gmail.com
- Facebook: Fb.com/beohoavinh

2 nhận xét:

  1. Dạ admin cho em hỏi, các đoạn code về thẻ div sẽ chép vào đâu ạ, em mới tìm hiểu về blogspot, mong được admin hướng dẫn ạ

    Trả lờiXóa

Ads by Google