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ọi Blogger 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.
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.
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.
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úc 20:54 4 tháng 9, 2014
Mình toàn phang cái này thôi, chèn ở dưới cùng phía trên </body> . Chèn trên </head> như cái này thì sợ không tốt cho SEO (dù chưa chắc chắn lắm)
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b}}resizeThumb("main",180);
//]]></script>
</b:if></b:if>
<script type='text/javascript'>
//<![CDATA[
$('.post-body a[href$=".jpg"], .post-body a[href$=".png"], .post-body a[href$=".gif"], .post-body a[href$=".bmp"]').attr({'class':'pirobox','data-pirobox':'gallery'});
//]]></script>
lúc 20:58 4 tháng 9, 2014
^^ Không biết bạn đọc đâu ra chứ mình làm SEO mà chưa từng nghe qua vụ đặt script trên thẻ </head> ảnh hướng đến SEO bao giờ :D
Có thể cũng đúng tốc độ tải của website có ảnh hướng đến SEO > Javascript và jQuery ảnh hưởng đến tốc độ. từ một và 2 suy ra "rất có thể".
Nhưng mà cho dù thế thì có nghĩa là đặt vào đâu cũng vậy thôi bạn nhé, nên đừng lo lắng về 3 cái này :)
lúc 21:20 4 tháng 9, 2014
Tiện thể cho hỏi: đặt CSS nhiều bên dưới ]]></b:skin> có ảnh hưởng gì tới SEO không :) ?
lúc 21:26 4 tháng 9, 2014
CSS thì hoàn toàn không liên quan đến SEO luôn, đặc biệt là tốc độ tải trang hầu như cũng chã biến đổi nha.
lúc 22:14 17 tháng 9, 2014
Hôm qua dùng đoạn này, hình hiện lên rất đẹp ở trang chủ
Nên dùng cái ở bài này hay dùng cái thủ thuật này http://www.kslzone.net/2014/05/resize-va-cat-anh-thumbnail-ung-kich.html để blog tốt hơn ?
P/s: blog nhiều bài hay và độc đáo lắm (y)
lúc 19:11 18 tháng 9, 2014
Nếu chỉ cắt ở một phần của blog thôi thì nên xài cái này vì nó ít nhiều nhanh hơn 1 tý. Còn nếu xài để cắt nhiều chỗ thì xài cái bằng jQuery kia :D
lúc 09:45 13 tháng 11, 2014
Mình sử dụng đoạn script trên nhiều lần cho các class khác nhau có gây load chậm không bạn?
lúc 09:46 13 tháng 11, 2014
Cái này còn tùy thuộc vào số lượng ảnh mà class đó chứa bạn nha, chậm thêm là vấn đề không thể tránh khỏi rồi.
lúc 09:54 13 tháng 11, 2014
Ak giờ mình mới để ý là dùng cho các class khác nhau trong cùng 1 id không được, chỉ có thể dùng cho các id khác nhau thôi. Có cách nào để dùng cho các class khác nhau trong cùng 1 id không bạn?
lúc 07:58 14 tháng 11, 2014
Lâm Kiều ơi! Cái template mình có phần loadmore post. Mặc dù nó cùng class với recent post nhưng khi nhấn load more post thì những bài viết hiện thêm không được resize thumbnail. Có cách nào khắc phục không bạn?
lúc 08:11 14 tháng 11, 2014
Mình nghĩ khó lắm, tại phần loadmore sử dụng Ajax do dó chắc phải viết trong Ajax call về cái jQuery này một lần nữa mới được, mà mình chưa test chưa biết được :) Còn jQuery này chỉ chạy 1 lần ngay sau khi trang tải trong xong.
lúc 08:32 14 tháng 11, 2014
Mình không chắc là nó bị sau nữa, đoạn jQuery này nó sử dụng chung tìm class và id của ảnh để replace địa chỉ. Chắc có thời gian phải kiếm để tối ưu lại.
lúc 08:42 14 tháng 11, 2014
Cái phần loadmore đó có đoạn resizeThumb("main",250);
Phần resizethumb ở trên là
function resizeThumb(e,a){for(var c=document.getElementById(e).getElementsByTagName("img"),b=0;b<c.length;b++)c[b].src=c[b].src.replace(/\/s72\-c/,"/s"+a+"-c")}
Mình đã sửa lại trong loadmore thành resizeThumb("main",370,255);
Và sửa đoạn ở trên lại thành
function resizeThumb(e,rong,cao){for(var c=document.getElementById(e).getElementsByTagName("img"),b=0;b<c.length;b++)c[b].src=c[b].src.replace(/\/s72\-c/,"/s"+rong+"-h"+cao+"-c")}
Nhưng nó chỉ resize mỗi chiều rộng chứ không resize chiều cao. Bạn xem dùm mình xem code có vấn đề chỗ nào không?
lúc 12:35 14 tháng 11, 2014
Bác để lại địa chỉ blog cho mình luôn để mình xem thử nhé chứ mình thấy bạn chỉnh cũng đúng rồi.
lúc 16:18 14 tháng 11, 2014
http://mynhancotrang.blogspot.com địa chỉ blog mình đây, Lâm Kiều xem giúp nhé. ngồi mò hoài ko ra ^^
lúc 18:57 14 tháng 11, 2014
Cũng lạ thật đấy mình thấy mọi thứ ok mà không hiểu sao nó lại ra link ảnh lại ra thế nữa. Nhiều khi do 2 đoạn javascript mã hóa ở dưới quá. Chắc phiền bạn mời mình quản trị hoặc send template mình test kĩ bên trong thế nào.