2015年9月1日 星期二

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

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

Wayne Fu 0 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 語法技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP