Blogger 文章封面圖 (縮圖) 的各種呈現方式

最近接到一個需求，案主希望在文章標題上方擺放文章縮圖。要說是 "縮圖" 其實不太精確，因為圖片必須滿幅寬(跟文章區塊同寬)，而這麼大的圖，應稱為 "封面圖" 比較貼切。

要做到這件事不難，使用「PICASA 或 Blogger 後台上傳的圖片」，Blogger 就能取得文章縮圖，再利用 Javascript 修改圖片網址參數，即可讓縮圖改以大圖呈現，並放到網頁的指定位置。

文章標題上方擺長方形圖片這個效果真的不錯，現在 WFU BLOG 版面也做了相關的調整。且後來發現 Blogger 還有更輕鬆的方式，不必寫任何 js 程式就做出這個效果，更棒的是圖床不限定 "PICASA 或 Blogger 後台上傳"，例如處理 "Flickr" 圖片也沒問題，因此值得分享新的作法及延伸應用。

(圖片出處: pixabay.com)

一、Blogger 封面圖標記語法

Blogger 使用縮圖的標記語法為 <data:post.thumbnailUrl/>，這代表該篇文章的縮圖網址，是一張 72x72 px 的正方形圖片。

這個設計在以前的年代沒什麼問題，FB、G+ 一開始縮圖也都是抓正方形的小圖。不過後來 FB 開始帶動 "封面圖" 風潮，貼文如果使用大尺寸圖片的話，會增加其曝光率。

當然 G+ 沒多久也開始跟進，也許是這個因素，Blogger 悄悄增加了一個新的標記語法：<data:post.firstImageUrl/>。

從字面上的意思很清楚，他會抓每篇文章的第一張圖片網址，無論是什麼圖床都可以，也不會縮小成 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 語法技巧：