讓blogger文章在首頁顯示等比例縮圖

   其實我用的這個template本來就有內建這功能，在blogger的首頁中，它可以將每篇文章的第一張圖片縮小放在裡頭，且內建擷取字數的自動閱讀。老實說我不太確定作者是從何處取用這功能的，我就以這篇來做說明，另外在後半段分享我遇到的問題。

• 進入「範本」，選取「編輯HTML」
• 找到 </head>
  
• 將以下貼到 </head> 之前

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
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 src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

• 說明一下上面紅字可修改的部份：

summary_noimg = 430; 

沒有圖片的文章所顯示在首頁的字元數。 例如430就代表，該篇文章若沒有圖片，則會在首頁顯示430字元的摘要。
當然如果你有用內建的繼續閱讀，則會以字數少的設定來顯示。

summary_img = 340;

有圖片的文章所顯示在首頁的字元數。 通常會比上面那個少。

 （因為還有圖片佔空間阿XD)  

img_thumb_height = 150; 

首頁顯示縮圖的高度。 

img_thumb_width = 200; 

首頁顯示縮圖的寬度。

• 找到 <data:post.body/> ，並且用以下取代：

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more </a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

• 如果會多出現一個「read more」在頁面，也就是原本就有自己的read more，請把這段刪除：
  
  

  <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more</a></span>

  
  
• 存檔收工！

BUT……!!!! 
打開網誌後你可能會發現一個大問題！！



哇哩勒，怎麼縮圖都變形了！

後來發現這是因為，原本的內建的寫法是讓所有縮圖都轉換成一樣的大小，不管你是長是扁，都把你壓的一摸摸一樣樣，不會照原比例縮小。於是我開始google有沒有辦法修改，但找到的一堆老外的方法都沒用，中文的更是找不到相關文章。
想了好久，總算找到解決的方法：

width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"

這是我們加入的其中一段語法，後來想到，只要把其中一行去掉就能解決問題啦！例如：

• 刪掉 width="'+img_thumb_width+'px"  這行，只留下height，它就會照你設定的高度縮圖，所有的圖片都縮成一樣高！
  
  
• 反之，刪掉 height="'+img_thumb_height+'px" 這行，只留下width，它就會照你設定的寬度縮圖，所有的圖片都縮成一樣寬！

個人是比較建議刪掉width 留下height，讓圖片一樣高，避免有些圖片太高，造成版面難看…
當然如果你喜歡縮圖都長得一樣方方正正的，那就可以不用理會這篇文章的後半段啦