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.

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

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 jQueryJavascript 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.

16 bình luận

  1. avatar says

    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 != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <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>

  2. avatar says

    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 :)

  3. avatar says

    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 :) ?

  4. avatar says

    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.

  5. avatar says

    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)

  6. avatar says

    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

  7. avatar says

    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?

  8. avatar says

    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.

  9. avatar says

    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?

  10. avatar says

    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?

  11. avatar says

    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.

  12. avatar says

    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.

  13. avatar says

    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?

  14. avatar says

    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.

  15. avatar says

    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 ^^

  16. avatar says

    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.

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.