HOME ABOUT CONTACT SITEMAP
Category
This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Monday, 5 November 2018

[Blogger] Tùy chọn thumbnail hiển thị bài đăng trang index

Thumbnail là thành phần không thể thiếu với một trang blog nói riêng và các website nói chung. Mặc định blogger luôn chọn ảnh đầu tiên trong bài viết (ảnh phải upload lên server của blogger nhờ công cụ upload trong trang viết bài) làm ảnh thumbnail nhưng đôi khi ta không muốn điều đó, liệu có cách nào tùy chọn được thumbnail, dùng ảnh từ server khác làm thumbnail và không muốn ảnh đó xuất hiện ở trong nội dung bài viết không ? Câu trả lời sẽ có trong bài viết này

Cách 1: Che mắt thiên hạ bằng phương pháp lầy


Cách này thì bạn vẫn phải upload ảnh lên server của blogger, ảnh thumbnail phải là ảnh đầu tiên trong bài viết và ta sẽ ẩn nó đi bằng thuộc tính css display:none

Tuy nhiên chẳng ai lại làm như này vì ảnh vẫn load và làm chậm trang bình thường và nhìn cũng không thật chuyên nghiệp

Cách 2: Sử dụng liên kết đính kèm (Enclosure)


Đây là 1 tính năng rất hay của blogger tuy nhiên có vẻ nó ít được sử dụng. Để làm việc với nó bạn tiến hành chỉnh một vài cài đặt sau


Tiếp theo tại giao diện trang viết bài bạn sẽ đính kèm thumbnail như sau


Trong đó
- Phần Thêm liên kết : bạn điền link ảnh vào
- Phần mime: thường thì nó tự detect và điền cho bạn (nhớ click chuột vào ô input) còn nếu bạn cần biết thêm thì nó là một cặp media type/subtype ví dụ image/png, text/html,... trong blogger có một số media type điển hình như
+ text : for text files
+ image : for graphic files
+ video : for video files
+ audio : for sound files
+ application : for files that are linked to a specific program
+ multipart : for multipart data
+ message : for news
+ model : for files that represent structures in multiple dimensions

Sau khi hoàn thành xong phần đính kèm liên kết thì phần khó nhất đó là chỉnh sửa mã XML, sẽ không có một quy chuẩn nào cả vì mỗi blogger template có một cấu trúc hiển thị thumbnail khác nhau. Nhiệm vụ của bạn là tìm tới đoạn code đó, thường thì nó bắt đầu bằng <b:if cond='data:post.thumbnailUrl'> với version cũ và <b:if cond='data:post.featuredImage'> với version mới

Tôi lấy ví dụ có một mẫu code hiển thị thumbnail trang index như sau


Bây giờ tôi muốn bài nào có liên kết đính kèm sẽ ưu tiên sử dụng thumbnail của nó trước, bài nào không có thì sẽ dùng ảnh đầu tiên làm thumbnail như mặc định mã xml sẽ như sau


Để lấy ra url của liên kết đính kèm áp dụng cho ảnh ta dùng code sau

<b:loop values='data:post.enclosures' var='enclosure'>
    <b:if cond='data:enclosure.mimeType in {&quot;image/jpeg&quot;,&quot;image/gif&quot;,&quot;image/png&quot;,&quot;image/jpg&quot;}'>
        <img expr:src='data:enclosure.url' />
    </b:if>
</b:loop>

Lắp vào code hoàn chỉnh ta được

<div class='snippet'>
    <div class='thumb'>
        <a expr:href='data:post.url'>
             <b:if cond='data:post.enclosures.notEmpty'>
                <b:loop values='data:post.enclosures' var='enclosure'>
                   <b:if cond='data:enclosure.mimeType in {&quot;image/jpeg&quot;,&quot;image/gif&quot;,&quot;image/png&quot;,&quot;image/jpg&quot;}'>
                      <img expr:src='data:enclosure.url'/>
                   </b:if>
                </b:loop>
             <b:else/>
                <b:if cond='data:post.featuredImage'>
                   <img src="data:post.featuredImage"/>
                </b:if>
             </b:if>
        </a>
    </div>
    <div class='meta'>
        <!-- code -->
    </div>
</div>

Như vậy bạn cần nắm vững đoạn code thẻ điều kiện lọc giữa bài đăng có sử dụng liên kết đính kèm và bài đăng không có liên kết đính kèm + đoạn code lấy ra url để áp vào mã html từ đó áp dụng cho blog của mình

Khi truy cập một số trang báo mạng bạn cũng có thể bắt gặp trường hợp bài viết toàn chữ, view-sources không thấy ảnh nhưng trang chủ vẫn có thumbnail, và điều đó blogger cũng có thể làm được

Nếu vẫn chưa tin bạn có thể kiểm tra bài viết này luôn (ảnh đầu tiên và ảnh làm thumnail hoàn toàn khác nhau, ảnh thumbnail không có trong sources)

Việc sử dụng liên kết đính kèm sẽ giúp bạn linh hoạt được server lưu ảnh cũng như dễ dàng chọn được ảnh nào làm thumbnail

Hi vọng qua bài viết này bạn sẽ có cái nhìn khác về liên kết đính kèm, đừng để lãng phí một tính năng rất hay của blogger

Để lại bình luận nếu bạn gặp khó khăn và chúc thành công !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js