[Blogger Addon and Fix] PremiumBloggerTemplates 版型縮圖功能小修正

近期我使用了很多從 PremiumBloggerTemplates 網站分享的 Blogger 版型，該網站分享的版型有幾個特點：輪播的特色文章、首頁文章縮圖、DropDown menu，其中首頁文章縮圖原來的程式是設定固定的縮圖大小，除了長形的圖比例會改變以外，有些時候文章裡的圖還比設定的縮圖大小還小時，就會變成放大模糊的圖，最近用 jQuery 加了一段小程式在底下去做判斷，當文章的圖比較小時，那就維持原來的圖的大小顯示。

做法：

首先，PBTemplates 用來產生首頁文章版面的程式：

這裡改的地方，除了只依照設定的寬去改變縮圖的大小 (拿掉了 height=”’+img_thumb_height+’px”) 以外，粉紅字的部份是我加進去的，用來給我寫的小程式處理用的

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
     if(img.length>=1) {
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img id="tnimg" src="'+img[0].src+'" width="'+img_thumb_width+'px"/></span>';
        summ = summary_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}

我寫的用來修正小圖被放大的小程式：

接在上面那一段之後會有一個 </script> 的後面，貼上底下的語法

<script>
//<![CDATA[
/* for small pics fix by jimmyyen using jQuery */
jQuery(document).ready(function() {
  jQuery("img[id^=tnimg]").each(function() {
         var timg = jQuery(this);
         var newImage = new Image();
         newImage.src = timg.attr("src");
          if (newImage.width && newImage.width < img_thumb_width) {
                timg.attr('width', newImage.width);
          }
   });
});
//]]>
</script>

提供給同樣有使用 PBTemplates 版型的朋友參考。最後我要感謝 PBTemplates 提供許多優秀的版型給 Blogger 的使用者。