October 13, 2014

Lấy ra ảnh đầu tiên của bài viết của Blogger và thay đổi kích thước

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.


Thay đổi kích thước thumbnail của blogspot



Hiểu về các kích thước hình ảnh trong Blogspot

Blogpost lưu trữ hình ảnh trong Picasa. Mỗi khi bạn upload 1 tấm ảnh trong Blogpost, Picasa sẽ tự động tạo ra 1 số kích thước khác và Blogspot sử dụng chúng để làm thumbnail. Dưới đây là 1 số ví dụ:
Đây là link đến thumbnail mặc định của bài viết Đồ dùng cho bé vào những ngày lạnh, với kích thước vuông 72px:
Nếu bạn thay đổi s72-c thành s500-c thì sẽ có một thumbnail vuông khác kích thước 500px:
Muốn xem hình ảnh kích thước mặc định ư? Hãy thay s500-c thành s1600:
Chú ý rằng những link nào có “-c” thì hình ảnh đó sẽ có kích thước vuông. Nếu bạn muốn kích thước thường thì chỉ cần bỏ “-c” ra khỏi link. Con số 1600 bạn có thể thay bằng bất cứ số nào cũng đều ra được hình ảnh với chiều ngang mong muốn.

Thay đổi kích thước thumbnail

Để được kích thước thumbnail như mong muốn, về nguyên tắc, bạn chỉ cần load đúng link của hình ảnh là được. Tuy nhiên, các widget (Tiện ích) như Popular Post không cho phép chúng ta lựa chọn mà chỉ sử dụng kích thước 72px. Chúng ta cũng không thể can thiệp vào code của các widget đó, vì chúng chỉ thể hiện qua 1 dòng lệnh đơn giản: expr:src=’data:post.thumbnail’
Nhưng chúng ta vẫn còn 1 cách, đó là dùng javascript để đổi “mã” kích thước sau khi blogspot load đường link của hình ảnh. Cách làm như sau:
1/ Vào Template –> Edit HTML, tìm đến widget Popular Post.
2/ Gõ Ctrl+F (Cmd+F với Mac) và tìm dòng lệnh expr:src=’data:post.thumbnail’
3/ Thêm 1 class vào image tag, ví dụ: class='resizethumbnail'
chinh-sua-kich-thuoc-thumbnail-trong-html-blogspot
4/ Tìm đến cuối của mã HTML, ngay trước </body> thêm những dòng lệnh sau:
<script type='text/javascript'>
$(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});});
</script>
Bây giờ các thumbnail đều đổi sang kích thước 500px. Còn nếu bạn muốn giữ tỉ lệ hình ảnh và chiều ngang 450px chẳng hạn:
<script type='text/javascript'>
$(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's450' );});});
</script>

c2,,

Thay đổi kích thước thumbnail:

Bạn tìm đến thẻ </body> sau đó thêm đoạn jQuery này lên trên:


<script type='text/javascript'>                 
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("Blog1",150);                 
</script>




Trong đó: Blog1 là id của wiget mà bạn muốn thay đổi thumbnail và 150 là kích thước mà bạn muốn cho ảnh thumbnail.


Các bạn sẽ thấy code này tạo ra 1 ảnh vuông kích thước 150px thay cho 72px truyền thống.


Để có 1 ảnh thumbnai tỉ lệ với ảnh gốc thì bạn sửa thành: 








<script type='text/javascript'>                 
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size);
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i&lt;thumbnails.length;i++){
thumbnails[i].width = size;
}
}
changeThumbSize("Blog1",150);                 
</script>







Ở đây sẽ có 1 ảnh width: 150px còn chiều cao theo tỉ lệ ảnh gốc.
Còn trong trường hợp chiều cao hơi thừa hay hơi thiếu với mong muốn của bạn thì chỉ cần code CSS:#id img{height: ...px;} lúc này ảnh của bạn sẽ bị thay đổi không đúng với tỉ lệ ban đầu nhưng mắt thường khó nhận ra, vì vậy bạn khỏi lo.

Cám ơn bạn đã đọc bài viết!















vào lúc





















Nhãn: