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

image
   其實我用的這個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……!!!! 
打開網誌後你可能會發現一個大問題!!
image
image

哇哩勒,怎麼縮圖都變形了!

後來發現這是因為,原本的內建的寫法是讓所有縮圖都轉換成一樣的大小,不管你是長是扁,都把你壓的一摸摸一樣樣,不會照原比例縮小。於是我開始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,讓圖片一樣高,避免有些圖片太高,造成版面難看…
當然如果你喜歡縮圖都長得一樣方方正正的,那就可以不用理會這篇文章的後半段啦
44 留言

留言

  1. img_thumb_width = 200;
    首頁顯示縮圖的「高度」。

    應該是寬度才對?
    感謝教學!

    回覆刪除
  2. 嗯嗯~我打錯了XDD
    謝謝你喔

    回覆刪除
  3. 哈囉你好...
    我用了以上的方法之後...
    發現一個問題...想請教您~

    因為原本我的版型就已經有個繼續閱讀的按鈕
    而用了以上語法後...卻又多出一個
    「read more "文章標題名"」的連結出來~
    請問該怎麼解決呢?

    回覆刪除
  4. Hi~monday
    你版型的繼續閱讀是自己另外裝的,還是內建的阿?
    剛剛看了一下你的網誌目前是正確的,不知道是哪出問題耶
    你要不要先使用後,我再看看...

    不好意思,我是小嫩嫩啦

    回覆刪除
  5. 哈...歹勢啦...你看的那個網球的不是我說的網誌~
    我自己的目前是藏起來的~我拍個照給你看好了~
    http://3.bp.blogspot.com/_OCr1HvYMShQ/TDl5B_2kswI/AAAAAAAADyA/Ba_Kn3kbZZU/s1600/readmore.png

    這樣有清楚嗎~
    感恩~

    回覆刪除
  6. 縮一下網址~剛那行網址太長了~
    http://tinyurl.com/29ax6hm

    回覆刪除
  7. 我原文寫說 「找到 ,並且用以下取代:」
    下面的那一大串裡:<span class='rmlink' style='float:right;padding-top:20px;'> read more ""</span>


    把這些刪掉

    你試試看吧~!

    回覆刪除
  8. ps.因為留言不能有程式碼,所以我把<打成全型喔

    回覆刪除
  9. 阿,留言好像怪怪的,反正就是span class='rmlink'到/span 那邊刪掉,我把原文修改一下你看看囉

    回覆刪除
  10. 哇!成功了!超級感謝你!

    回覆刪除
  11. 呵呵,不會,有問題歡迎提出囉^^

    回覆刪除
  12. 請問一下我怎麼找都找不到

    該怎麼辦哩@@?

    回覆刪除
  13. hi winlin, 請問你找不到什麼呢?

    回覆刪除
  14. 谢谢格主~~ >w<
    我套用的板型也是内置的,但是就是变形了..XD
    感谢大大的用心~~

    回覆刪除
  15. Hi,aLein,請問你說的變形是只圖片比例嗎?你可以參考這篇文章的最後幾段,試試看吧

    回覆刪除
  16. 感謝分享,我用這一篇PO文修改後,大部分正常,但是有一點點奇怪,summary_noimg = 430; 修改為300或200後似乎沒什麼差別,抓的字數都一樣,還有很奇怪的一點,沒有圖片的文章,抓的字數長短也不一樣?不知是何原因?
    另外請教一下,首頁的文字部分是否都不分段落的,可否改為有段落的顯示?謝謝!

    回覆刪除
  17. @strong:
    您好,請問你有使用其他「繼續閱讀」的外掛吗?如果有的話,舊有可能造成這問題...

    段落問題我也有這困擾,目前還不知道如何解決,真不好意思...

    回覆刪除
  18. 想請問一個問題~~~
    我使用Addthis的分享工具,加上Facebook的分享按鈕
    但是分享的內容會變成
    summary_noimg = 430;
    summary_img = 340;
    img_thumb_height = 150;
    img_thumb_width = 200;等等的訊息
    不知道是程式碼的哪個地方相衝呢??
    沒辦法分享我文章的內容耶

    回覆刪除
  19. 請問一下
    為什麼我用此程式碼,怎麼會讓我blog上的按鈕連結失效!!?

    回覆刪除
  20. to Kris-Studio請問什麼按鈕?

    回覆刪除
  21. 作者已經移除這則留言。

    回覆刪除
  22. 請問版主,我照著您的語法,可為什麼沒有自動縮放呢?圖片還是被壓扁...

    回覆刪除
  23. 有搜尋到width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" 這段嗎?請刪掉 width="'+img_thumb_width+'px" 這行

    回覆刪除
  24. 作者已經移除這則留言。

    回覆刪除
  25. 超级感谢,一次解决两个问题

    回覆刪除
  26. 請問找到 ,並且用以下取代這邊是取代一行就好?

    回覆刪除
  27. 請問這功能是否可在進化改成文章左右(雙欄)節省空間呢?
    自行修改了半天 真ㄉ不會

    可否請教該如何修改
    感謝您

    回覆刪除
  28. 那請教站長
    是否可以多改成雙欄文章 或是三欄文章

    找很久了~懇請站長賜教

    感激不盡

    回覆刪除
  29. 請問最新文章如何加入呢?

    回覆刪除
  30. 非常感謝您提供的方法,我巳經按照您的方法,完成了文章縮圖的功能

    回覆刪除
  31. 您好,試了半天還是不行,請問:找到 ,並且用以下取代,是要刪除某些部分,在貼上嗎?

    回覆刪除
  32. 您好,試了半天還是不行,請問:找到data:post.body,並且用以下取代,是要刪除某些部分,在貼上嗎?

    回覆刪除
    回覆
    1. 您好,那段的意思是,要把 取代掉,把下面方塊裡的文字貼上去

      刪除
  33. 請問一下,我在設定那邊找不到你說的
    「進入「版面配置」,選取「修改HTML」,勾選「展開小裝置範本」」
    是因為版型的問題嗎?
    http://wanghenrytw.blogspot.tw/

    回覆刪除
    回覆
    1. 您好,不好意思因為這篇是很久以前寫的,blogger後來有更新過介面。

      進入的方式是:

      "進入「範本」,選取「編輯HTML」"

      感謝指教!

      刪除
    2. 阿~對了!這個HTML的功能是不是讓不論多大解析度的照片,都會自動依照比例調整,而避免有圖片超出文章的情形呢?

      刪除
    3. 您好 不好意思之前漏回您的留言,確實會自動調整, 避免圖片超出

      刪除
  34. 作者已經移除這則留言。

    回覆刪除
  35. 作者已經移除這則留言。

    回覆刪除