最近接到一個需求，案主希望在文章標題上方擺放文章縮圖。要說是 "縮圖"其實不太精確，因為圖片必須滿幅寬(跟文章區塊同寬)，而這麼大的圖，應稱為 "封面圖"比較貼切。要做到這件事不難，使用「PICASA 或 Blogger 後台上傳的圖片」，Blogger 就能取得文章縮圖，再利用 Javascript 修改圖片網址參數，即可讓縮圖改以大圖呈現，並放到網頁的指定位置。
文章標題上方擺長方形圖片這個效果真的不錯，現在 WFU BLOG 版面也做了相關的調整。且後來發現 Blogger 還有更輕鬆的方式，不必寫任何 js 程式就做出這個效果，更棒的是圖床不限定 "PICASA 或 Blogger 後台上傳"，例如處理 "Flickr"圖片也沒問題，因此值得分享新的作法及延伸應用。
(圖片出處: pixabay.com)
一、Blogger 封面圖標記語法
Blogger 使用縮圖的標記語法為
這個設計在以前的年代沒什麼問題，FB、G+ 一開始縮圖也都是抓正方形的小圖。不過後來 FB 開始帶動 "封面圖"風潮，貼文如果使用大尺寸圖片的話，會增加其曝光率。
當然 G+ 沒多久也開始跟進，也許是這個因素，Blogger 悄悄增加了一個新的標記語法：
從字面上的意思很清楚，他會抓每篇文章的第一張圖片網址，無論是什麼圖床都可以，也不會縮小成 72px 的正方形。
知道這個標記語法後，就可以拿來製作封面圖了，且真的比原本的縮圖標記語法好用多了，不必再用 js 來修改網址參數，才能取得大圖網址，因為這個標記語法，代表的就是原始大圖網址。
二、文章標題前後擺封面圖
瞭解原理後，執行起來就容易多了。首先參考「Blogger 範本﹍(3)文章區塊」→「三、文章區塊」→「1. 文章標題」，可找到範本中 "文章標題"的位置。
在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。
如果想把封面圖放在標題上方，可在 "文章標題"程式碼的前一行，插入以下程式碼：
<div class='post-cover'><img expr:src='data:post.firstImageUrl'/></div>如果想把封面圖放在標題下方，以上程式碼請放在 "文章標題"程式碼整個區塊的下一行。
這樣就能讓文章中的第一張圖片，出現在指定位置。
需要調整版面的話，請繼續設定 CSS，到後台範本 → 自訂 → 進階 → 新增 CSS，輸入以下內容：
.post-cover {
margin: 15px auto;
text-align: center;
}
.post-cover img {
width: 100%; /*強制圖片寬度跟區塊一樣*/
height: 300px; /*強制圖片高度, 請行調整數值*/
padding: 5px; /*內襯距離*/
background: #ffffff; /*背景白色*/
border: 1px solid #444444; /*外框*/
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /*陰影*/
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}- 以上是簡單的圖片 CSS 設定，熟悉 CSS 的讀者請自行修改細節。
- 由於對圖片寬度、高度強制設定了尺寸，請讀者每篇文章的第一張圖片，尺寸、比例必須相近，以免變形嚴重。
- 想要設定不一樣的陰影、外框效果，可參考「將圖片套用立體陰影效果」。
三、首頁縮圖+文摘
過去在「Blogger 頁面判斷語法__五個實用範例說明」→「三、在首頁顯示自訂尺寸縮圖及文章摘要」介紹過這個不錯的效果，很多範本網站都可看到類似的版面。
現在拿「Blogger 封面圖標記語法」來套用，這段程式碼就精簡多了，不需再執行 js。以下簡單舉例，將原本的程式碼修改為以下版本：
<b:if cond='data:blog.url == data:blog.homepageUrl'><!--首頁時使用縮圖及文摘-->
<div class='index-thumbnail'>
<b:if cond='data:post.firstImageUrl'><!--檢測第一張圖是否存在-->
<span class='home-post-cover'><img expr:src='data:post.firstImageUrl'/></span>
</b:if>
</div>
<div class='index-snippet'><!--文摘開始-->
<data:post.snippet/>
</div><!--文摘結束-->
<b:else/><!--非首頁時，使用Blogger預設圖文模式-->
<data:post.body/>
</b:if>
<!--<data:post.body/>--><!--此行為註解、保留原本的程式碼-->接著設定圖片 CSS，一樣到後台範本 → 自訂 → 進階 → 新增 CSS，輸入以下內容：
.home-post-cover img {
width: 200px; /*強制圖片寬度*/
height: 100px; /*強制圖片高度*/
float: left; /*漂浮左側*/
margin: 0 10px 10px 0; /*邊界距離*/
padding: 5px; /*內襯距離*/
background: #ffffff; /*背景白色*/
border: 1px solid #444444; /*外框*/
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /*陰影*/
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}請參考綠字註解來修改，最重要的是將縮圖寬、高改為自訂尺寸。
四、隱藏第一張圖片
最後剩下的問題會是，封面圖(縮圖)獨立拉出一個區塊來顯示時，讀者可能會在很近的距離，看到兩張一模一樣的圖片，也就是封面圖與文章中的第一張圖。
所以如果不想讓訪客看到這樣的情形，可以將文章中的第一張圖隱藏起來，使用簡單的 js 可做到這件事。
請到後台「範本」→「編輯 HTML」，游標點進範本區塊，按 Ctrl-F 搜尋此字串：
<div class='post-footer'>可能會有兩個搜尋結果，兩個都要處理。請在此字串之前，插入以下程式碼：
<script>
document.querySelector(".post-body img").style.display = "none";
</script>這樣就沒問題了。
需要注意的是，如果使用了「三、首頁縮圖+文摘」的程式碼，那麼以上程式碼請加個判斷式，只在文章頁面執行，否則首頁的縮圖會被判定為第一張圖，反而被隱藏起來了。
更多 Blogger 語法技巧：