Tạo biểu tượng nhãn hiển thị trong ảnh
Để thêm phần sinh động, tạo điểm nhấn cho ảnh bài viết ngoài trang chỉ mục, một số trang web đặc biệt là những trang tin tức thường thiết kế thêm các biểu tượng nằm bên trong ảnh hiển thị góc trái phải trên dưới của ảnh giúp người đọc biết bài viết đó thuộc chuyên mục nào chẳng hạn như video, photo. Tóm gọn lại là thay thế văn bản label bằng biểu tượng hiển thị.
Sử dụng điều kiện trong vòng lặp lọc lấy label thay thế bằng class sau đó design css cho class để cho ra biểu tượng. Lấy ví dụ mình sẽ lọc label lấy ra hai chuyên mục video và photo sau để chèn vào ảnh, mình sẽ chèn như sau:
 |
| Biểu tượng video và photo hiển thị góc phải ảnh bài viết |
Đầu tiên mình sẽ đi tìm element của ảnh trong theme, giả sử nó có một đoạn xml trong theme như sau:
<b:tag class='post_thumb' name='div'>
<b:tag expr:title='data:post.title' name='a'>
<b:attr expr:value='data:post.link ? data:post.link : data:post.url.canonical' name='href'/>
<b:if cond='data:post.featuredImage.isYouTube'>
<img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:view.featuredImage.youtubeMaxResDefaultUrl, 320, "16:9")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<b:elseif cond='data:post.featuredImage'/>
<img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 320, "16:9")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<b:else/>
<img class='lazyload' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA_GMOT1gWFvljjK2vXqOj9HgNbY2ygbgptXRR5-zbjJlIWjO_L_mnbKarRSLEZRNRksZyD0AOuAj21aekxTxRtpaghUtlis17Jk61ZKutvaLqq68oUbjExksbqhgUgxCAkFvZ8sYIv5OG/s320/safe_image.png' expr:alt='data:post.title' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</b:if>
</b:tag>
</b:tag>
Mình sẽ thêm 2 label video và photo thay thế bằng class thumbnail_video và thumbnail_photo cùng với class post_thumb
<b:tag class='post_thumb' name='div'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name eq "video"'>
<b:class name='thumbnail_icon thumbnail_video'/>
<b:elseif cond='data:label.name eq "photo"'/>
<b:class name='thumbnail_icon thumbnail_photo'/>
</b:if>
</b:loop>
<b:tag expr:title='data:post.title' name='a'>
<b:attr expr:value='data:post.link ? data:post.link : data:post.url.canonical' name='href'/>
<b:if cond='data:post.featuredImage.isYouTube'>
<img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:view.featuredImage.youtubeMaxResDefaultUrl, 320, "16:9")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<b:elseif cond='data:post.featuredImage'/>
<img class='lazyload' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.featuredImage, 320, "16:9")' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
<b:else/>
<img class='lazyload' data-src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA_GMOT1gWFvljjK2vXqOj9HgNbY2ygbgptXRR5-zbjJlIWjO_L_mnbKarRSLEZRNRksZyD0AOuAj21aekxTxRtpaghUtlis17Jk61ZKutvaLqq68oUbjExksbqhgUgxCAkFvZ8sYIv5OG/s320/safe_image.png' expr:alt='data:post.title' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</b:if>
</b:tag>
</b:tag>
CSS cho 2 biểu tượng video và photo, mình sử dụng background-image
.thumbnail_icon:after {
position: absolute;
content: " ";
display: inline-block;
background-image: url(https://cdn.jsdelivr.net/gh/thietkeblogspot/images/thumbnail_icon.png);
background-color: rgba(0,0,0,.5);
right: 5px;
bottom: 5px;
width: 23px;
height: 23px;
border-radius: 15px;
background-size: 100px 4250px;
}
.thumbnail_video:after {
background-position: 0 -750px;
}
.thumbnail_photo:after {
background-position:0 -700px;
}
.thumbnail_video:hover:after,.thumbnail_photo:hover:after {
background-color:rgba(0,0,0,.7);
}
.thumbnail_video:hover:after {
background-position:-50px -750px;
}
.thumbnail_photo:hover:after {
background-position:-50px -700px;
}