[小工具]Blogger 熱門文章＋任意尺寸縮圖__兼談圖示製作技巧

(Pic from: psdgraphics.com, dreamstime.com)2016.8.15 公告：已推出 V2 版本，請前往這篇「Blogger 熱門文章 V2﹍卡片式縮圖 + 自適應尺寸」。

Blogger 內建的熱門文章小工具，附帶了一個美觀的顯示縮圖功能，只要文章中有插入任何圖片的話，Blogger 會抓取第一張圖片轉換為縮圖。不過這個小工具的縮圖功能還是有一些限制，例如──

1. 從 Blogger 上傳或是 Picasa 圖床的縮圖可以正常顯示，以外的圖床則無法 100% 保證全部顯示。
2. 縮圖的尺寸固定為寬 72px，長方形的圖通常會被裁切成正方形，導致圖案不完整。
3. 文章中沒有任何圖片時就無法顯示縮圖，且無法使用替代圖片當成預設縮圖。

關於第 1 點，自家產品的相容性當然較佳，想避免意外只能盡量不外連其他圖床；而本文的內容就是針對第 2、3 點來 hack。想直接修改程式碼可跳到「三、修改有縮圖、無文章摘要的程式碼」，不過還是建議先瞭解一些必要知識，再來修改程式碼，比較能符合預期的效果。另外，其他的圖床如果也想要套用本文的 hack，請見文末的說明。


一、PICASA 圖片規則

進入主題之前必須先瞭解一下 PICASA 這個平台的運作原理，「這個網頁」的心得非常棒(只不過不是每一點都是正確的)，每張圖檔的網址路徑都是使用 "sxxx" 這樣的參數來控制圖片大小，例如圖片網址的參數為 "s128" 時，這張圖片便是以寬 128px 來顯示，高度則會依比例調整。

簡單整理一下這個網頁的其他重點：

1. 在 "sxxx" 後面加上 "-c" 參數時，圖片會以正方形顯示；如果原圖是長方形，則左右會被裁切。舉個例子說明就很清楚，下面左圖的參數設為 "s200"、右圖的參數設為 "s200-c"，一眼就能看出差別：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjptp1cDhsyT_rIE-CpHS4SwC-MWwr127qm5LP-55vlsMwu39ZB6GVL7JXcuPxrhGPZNx5Yja46_UocWeyk90QJqFRGOXX9m3sXBV-1QSYg-wsfF_pKKwdzQNW3enRTQQS5izJav5aHCslM/s200/tabs.jpg		https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjptp1cDhsyT_rIE-CpHS4SwC-MWwr127qm5LP-55vlsMwu39ZB6GVL7JXcuPxrhGPZNx5Yja46_UocWeyk90QJqFRGOXX9m3sXBV-1QSYg-wsfF_pKKwdzQNW3enRTQQS5izJav5aHCslM/s200-c/tabs.jpg

2. "sxxx" 的參數若超出原圖寬度，則顯示原圖尺寸，不會變大；參數最大到 "s1600" 為止。

3. 在原圖寬度以下的任何參數，PICASA 都能顯示出來，例如下圖的參數為 "s333" 這個不規則的數字：

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjptp1cDhsyT_rIE-CpHS4SwC-MWwr127qm5LP-55vlsMwu39ZB6GVL7JXcuPxrhGPZNx5Yja46_UocWeyk90QJqFRGOXX9m3sXBV-1QSYg-wsfF_pKKwdzQNW3enRTQQS5izJav5aHCslM/s333/tabs.jpg

掌握了以上要點設定適當的參數，就不會讓網頁總是讀取原始大圖檔的尺寸，可以省下許多存取時間與系統資源。



二、製作圖示技巧

現在主流的螢幕都是 1080P，因此最好把訪客的螢幕視為 1920 x 1080 這樣的解析度。當部落格網頁的寬度設定在 1000px 左右時，代表在訪客的螢幕上通常是放大到將近兩倍(才能撐滿螢幕)，而所有的圖片也必須放大近兩倍。

以此為前提之下，一張壓縮過的 jpg 圖檔本身已經失真，再放大為兩倍的話，會有鋸齒、馬賽克也不意外了。所以，熱門文章小工具的縮圖為 72px 正方形大小，已經非常非常不清楚，接著在 1920 x 1080 的螢幕上又放大兩倍，效果可想而知。

想讓圖片在大螢幕上放大兩倍後不失真，最好的方法是製作一張兩倍寬度的原圖，接著再用 img 標籤去設定其顯示寬度只有 1/2，那麼這張圖在訪客的 1920 x 1080 螢幕上，放大兩倍後剛好還原為原圖尺寸，就不會失真了。

舉個實例，本站右邊的側邊欄，標題旁邊都有個小圖示，就像「搜尋」旁邊的 ，預計顯示大小為 14 x 14px，那麼製作原圖時的尺寸必須都是 28 x 28px 以上，接著在 img 標籤裡面設定 style='width: 14px; height: 14px;' 就能以 14 x 14px 顯現，並在放大兩倍後不失真。

同樣的，為了讓熱門文章小工具的所有縮圖比例一致，我每篇文章的第一張圖都設成一樣的長寬比 2:3，而預計縮圖顯示的尺寸長寬為 72 x 108px，那麼縮圖原圖在 PICASA 圖床給的參數就設為兩倍 s216。


三、修改有縮圖、無文章摘要的程式碼

首先，請確定是否已經裝了熱門文章小工具，且圖片必須是經由 Blogger 上傳或放在 PICASA。關於縮圖那一部分的程式碼，有兩種選擇：A. 只有縮圖、沒有文章摘要。B. 有縮圖、也有文章摘要。

以下步驟先針對 A 點進行修改──

1. 到 Blogger 後台 → 範本 → 編輯 HTML

2. 搜尋「(3) Show only thumbnails」這樣的字串，這區塊便是 A 點的程式碼。接著──

<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
把以上幾行程式碼，全部置換為以下的程式碼：


主要的更改就是把綠字的部分刪除、加入藍字與紅字的部分，存檔即完成，想先看效果可參考右邊的側邊欄。以下為修改的說明：

I：只要是從 Blogger 上傳、或是放在 PICASA 的圖片，被轉換的縮圖參數一定是 "s72-c"，意思就是裁切成 72px 寬的正方形。所以利用 replace 置換字串，將 "s72-c" 改成我們想要的寬度，縮圖就能變得多大。以本站為例，我想讓縮圖變成 108px 寬，將這個數值乘以二後，我置換的參數成為 "s216"。為何乘以二的原因請參考「二、製作圖示技巧」，而紅字 "s216" 請改為自訂的尺寸參數。

J：紅字 "108" 代表縮圖顯示的寬度，請改為自訂的縮圖寬度。

N：想讓文章沒縮圖時也能顯示預設圖片，那麼請將這一行紅字部分的圖片網址，改成自訂圖片網址就行了。當然，這張圖片的寬度，應該要和其他的文章縮圖尺寸保持一致；另外的紅字 "108" 代表這張預設圖片顯示的寬度，一樣請改為自訂的預設圖片寬度。


四、修改有縮圖、也有文章摘要的程式碼

這部分的程式碼接續在以上程式碼的下一行，就是 (4) Show snippets and thumbnails 的區塊，跟「有縮圖、無文章摘要」格式大同小異，主要差別是多了一行 <div class='item-snippet'><data:post.snippet/></div>，用來顯示摘要之用。如果有需要修改這部分的話，參考之前的修改邏輯即可：

1. 刪除綠字的程式碼
2. 在一樣的位置插入藍字、紅字程式碼。

因為內容差不多，且由於篇幅的關係，所以偷懶一下不再重複列出程式碼，如果有問題請再提出了。最後，如果你的圖床不是 PICASA，又想使用這個 hack，只要有辦法搞清楚該圖床的縮圖規則(例如 flickr 的原圖網址 xxx.jpg 只要改成 xxx_t.jpg， 就是縮圖的網址)，是有可能套用這個 hack 的。


2012.10.12 補充

此部分為回答【留言 #02】的內容──

1. 圖片邊框陰影效果：原程式碼改為以下兩行──

  J：增加紅字部分 document.write("<img src='"+ pic +"' style='width: 108px; height: auto; border: 1px dotted lavender; box-shadow: 2px 2px 2px #d6d6d6; padding: 0px;'/>")

  N：增加紅字部分 <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3JMBXZBPqJwAMl8c2TQBef57H7Op0aZh96mxP3RoRwa5HthSg2GoBgJg5eLEXvsm-EhOqI3YW0jxGRPNHzqpJjB2xSi6To774n1ZSPN7BZ-ARPZjIwehwabOSibtFQ-fXJHQo2qLvWpqc/s1600/no-image.jpg' style='width: 108px; height: auto; border: 1px dotted lavender; box-shadow: 2px 2px 2px #d6d6d6; padding: 0px;'/>

紅字部分的數值也可自行調整效果。


2. 縮短與上下邊界的距離：原程式碼改為以下兩行──

  C：增加紅字部分 <div class='item-thumbnail' style='margin-top: ??px; margin-bottom: ??px;'>

margin-top 代表與上邊界的距離；margin-bottom 代表與下邊界的距離。由於每個範本的效果可能不一樣，?? 要填入的數值得自行測試，請參考「Google Chrome 開發人員工具──調整部落格版面實作」的流程來找出適合的數值。

  R：增加紅字部分 <div class='item-title' style='margin-top: ??px; margin-bottom: ??px;'><a expr:href='data:post.href'><data:post.title/></a></div>

R 行 ?? 要填入的數值與 C 行一模一樣即可。

另外，如果覺得圖片與文章標題的距離太近，可以在 C 行的 style 屬性裡面增加一個參數 margin-right: ??px;，設定圖片與右邊文章標題區塊的距離，?? 的數值一樣請自己測試一下，通常 10px 是 ok 的。
Google Picasa圖片外鏈的url參數


更多實用工具：

• 本站使用的 Blogger hack 及工具整理