2015年9月19日

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

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

要做到這件事不難,使用「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 語法技巧:

6 則留言:

  1. 看到這個讓我想到有沒有辦法 可以讓不是第一張圖的圖當封面圖面

    這樣就算想拿第 N 張當封面圖,也不用更改照片的排列順序

    回覆刪除
    回覆
    1. Blogger 目前沒有提供這件事的語法,所以只能另外寫 js 來處理了。

      比較不麻煩的方法之前有寫過,可參考 http://www.wfublog.com/2013/07/blogger-post-select-thumbnail.html

      刪除
  2. 跟著你的指示了,還是沒有縮圖?為什麼?

    http://oppanunni.blogspot.my/

    回覆刪除
    回覆
    1. 這篇介紹了好幾個效果,我不知道你要做那個效果

      刪除
  3. 您好
    我在寫一篇新文章x的時候
    想插入舊文章ABC的縮圖和連結

    目前是另外插入一張文章A的圖片
    再去找文章A的網址
    在做一段文字超聯結

    請問有外掛或其它比較快的方式嗎?
    在您的blog爬文很久
    只找到類似這個相關文章的外掛

    回覆刪除
    回覆
    1. 你好,根據以上訊息,我無法知道你要插入的「舊文章ABC」,跟該篇文章有什麼關聯,你要能說得出關聯性,那麼插入的動作才有辦法程式化。

      沒有辦法程式化的動作,那麼就只能手動插入了。

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。