Lấy ảnh đầu tiên trong bài viết ở blogspot

( Khởi nghiệp với Internet)

Việc sử dụng đoạn mã mặc định của Blogger sẽ giúp cho blog của bạn có tốc độ tải trang nhanh hơn và ít lỗi hơn nhiều so với việc nhờ vả Javascript. Thì không phải lằng nhằng nữa vào việc thôi sau đây là điều các bạn quan tâm.

Lấy ảnh đầu tiên của bài viết bằng mã mặc định của Blogger

Nếu các bạn tinh ý và thích vọc nhiều trong template như mình các bạn sẽ thấy, mặc định của một Blogger Template chưa chỉnh sửa gì hết sẽ có một đoạn mã như thế này

<b:if cond='data:post.firstImageUrl'>
 <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
</b:if>

đoạn mã này có nhiệm vụ tạo ra một thẻ meta khai báo hình ảnh của bài viết và từ thẻ meta đó nó cung cấp đường link của hình ảnh đầu tiên của bài viết đến các công cụ tìm kiếm.

Lợi dụng nó các bạn chỉ cần chỉnh sửa đôi chút là đã lôi hình ảnh đầu tiên ra rồi, cái này chắc khỏi phải giải thích cho rắc rối, mình sẽ làm luôn cho các bạn, ở đoạn mã trên sau khi mình chỉnh sửa xong thì nó sẽ thành ra thế này

<b:if cond='data:post.firstImageUrl'>
 <img expr:src='data:post.firstImageUrl' expr:title='data:post.title' expr:alt='data:post.title' />
</b:if>

ở đây mình xóa bỏ đi thuộc tính itemprop vì không phải thẻ meta và ko cần xài nó nữa, và mình có thêm vào 2 thuộc tính title và alt để tối ưu hơn cho SEO.

Bây giờ bạn có thể đặt vào bất cứ vị trí nào bên trong phần

<b:includable id='post' var='post'>
...
</b:includable>

thì nó sẽ hiện hình ảnh đầu tiên ở đó.

Trong trường hợp nếu bài viết không có hình ảnh, thì tương đương với nó sẽ không hiện gì hết, trong trường hợp bạn muốn có hình ảnh mặc định cho bài không có ảnh bạn sử dụng đoạn mã sau

<b:if cond='data:post.firstImageUrl'>
   <img expr:src='data:post.firstImageUrl' expr:title='data:post.title' expr:alt='data:post.title'/>
<b:else/>
   <img src='ĐỊA CHỈ URL HÌNH ẢNH MẶC ĐỊNH' expr:title='data:post.title' expr:alt='data:post.title'/>
</b:if>

bằng việc sử dụng if & else đơn giản, chắc bạn nhìn qua cũng hiểu rồi.

Lời kết

Thủ thuật này mình sử dụng cách lấy dữ liệu ra của blogger bằng các đoạn mã data đơn giản, và tham khảo thêm một chút tại Blogger Template mặc định.
Cụ thể nhé
- tìm 3 đoạn <b:if cond='data:post.thumbnailUrl'>
- thay bằng code

<b:if cond='data:post.firstImageUrl'>

   <img expr:src='data:post.firstImageUrl' expr:title='data:post.title' expr:alt='data:post.title' height='100' itemprop='image' width='150'/>

<b:else/>

   <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCGo98_GglboKlmdNLS0fcMEMpHDfJ2COG3Z1QqJ-_rIyqIQyC43tZ64F_0pyrRiasA-TCe1eR2lRTGy2Of3wb2kf5SNqxKlL1D-tcQpDfYVY8mMoe-J2pYNZK4XqqMtX2lc5ZhynBRY/w140-h140-p/images.jpg' expr:title='data:post.title' expr:alt='data:post.title'/>

</b:if>

- Đoạn 1: class='post hentry' là thiết lập ảnh hiển thị ở phía trên tiêu đề, trong bài viết chính
- Đoạn 2: thiết lập ảnh hiển thị dưới tiêu đề trong mỗi bài viết
- Đoạn 3: class post-summary:  thiết lập ảnh hiển thị dạng thumbnail, thay cả cái đoạn scrip có data:post.thumbnailUrl thành đoạn  data:post.firstImageUrl

Blog tổng hợp những kinh nghiệm được học, áp dụng và chia sẻ