Resize và cắt ảnh nhiều thành phần của Blogger

Cái này thì chắc chỉ có chia sẻ ở tại đây KslZone thôi, resize và cắt ảnh đúng chuẩn cho mọiBlogger template mà bạn mong muốn. Hiện giờ mình biết là ít ai biết về cái mẹo nhỏ về link ảnh tải lên ở Blogger này, hầu hết mọi người chỉ biết là dùng "-c" để cắt ảnh về hình vuông, nên toàn là cắt ảnh về hình vuông rồi cho thuộc tính overflow vào nó để che đi phần bị thừa.



Thế chức năng đoạn jQuery này làm gì?

Ảnh sau khi được resize không bị mờ đi so với ảnh gốc.

Cắt ảnh chính xác đúng với chiều cao và chiều rộng mà bạn mong muốn.

Chỉ hoạt động với ảnh tải lên ở Blogger.

Hoạt động với mọi Blogger Template.

Sau khi mình công khai những cái đoạn jQuery và Javascript cắt ảnh này, rất có khả năng mấy bác làm template biết tới thì thì chắc sẽ thay đổi toàn bộ diện mạo của Blogger sắp tới. Và cái vụ ảnh thumbnail méo mó và khó chịu ở Blogger cuối cùng đã được khắc phục.

Trước đây mình có chia sẻ một đoạn mã resize và cắt ảnh với chức năng tương tự nhưng chỉ hoạt động cho một đối tượng có id cụ thể nào đó, bây giờ đoạn jQuery này sẽ hỗ trợ điều đó cho nhiều đối tượng khác nhau trên template của bạn.

Resize và cắt ảnh nhiều thành phần của Blogger

Tìm đến thẻ </head> trong Blogger template của bạn, và chèn đoạn mã này lên trên

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var rong = 200;
var cao = 150;
$('#PopularPosts1, #Blog1, #related-posts').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + rong + '-h' + cao +'-c')});
image.attr('width',rong);
image.attr('height',cao);
});
});
//]]></script>

thay đổi rong và cao bằng chiều rộng và chiều cao của ảnh mà bạn mong muốn, #PopularPosts1, #Blog1, #related-posts là id của những đối tượng được resize, bạn có thể thay đổi cho phù hợp với blog của bạn.

Trong trường hợp bạn muốn resize và cắt ảnh cho nhiều đối tượng với kích thước khác nhau, bạn chỉ việc sao chép và dán đoạn mã này nhiều lần, và bỏ vào id từng đối tượng với các kích thước khác nhau.

Lời kết

Nếu bạn có kiến thức sơ sơ vào lập trình thì bạn sẽ biết được mình đã làm cách nào để làm resize và cắt ảnh được như thế này. Nếu bạn muốn hiểu rõ hơn, hoặc muốn làm thủ công thì bạn có thể tham khao qua bài viết thủ thuật với ảnh tải lên ở Blogger trước đây của mình.

http://www.kslzone.net/2014/06/resize-va-cat-anh-nhieu-thanh-phan-cua.html