2013年7月1日 星期一

[教學]選擇喜歡的圖片當作 Blogger 文章縮圖(封面圖)

[教學]選擇喜歡的圖片當作 Blogger 文章縮圖(封面圖)

Wayne Fu 0 A+
Blogger 抓取文章縮圖的原理為,選取文章中的第一張圖片。而 +Ida Wu 在這個「Blogger 中文社群討論串」詢問:"我的blog首頁是套用magazine版面,我能決定每一篇文章的封面照片是哪一張嗎?...除了第一張,不能自選囉?"

雖然只要把想成為縮圖的圖片,放在文章的最前面即可達到目的;不過後來想想,也許有某些情境,想當封面圖(縮圖)的圖片,不一定適合擺在最前面的位置,因為版面或整體感可能變得突兀。

那麼有沒有辦法解決這樣的狀況呢?


一、隱藏圖片

理論上而言,直覺想到的解法是,把想當縮圖的圖片,放到文章最前面,再將其隱藏起來,如此又能被系統抓來當縮圖,而自己又看不到這張圖片,不至於影響到版面配置,算是解決了兩難的狀況。

不過 Blogger 系統會不會抓取隱藏圖片當縮圖是個疑問,測試了一下結果發現可行,那麼以下簡單說明作法。

1. 正常圖片的語法如下──

<img src="圖片網址"/>

2. 要隱藏圖片可用以下語法,加入字串 style="display: none; width: 0px;" 即可──

<img style="display: none; width: 0px;" src="圖片網址"/>

3. 操作方法

在 Blogger 的文字編輯器寫完文章後,從「撰寫」模式切換到「HTML」模式,把要當作封面圖案(縮圖)的那張圖片,將圖片語法複製到文章的最前面,然後如同第 2 點,插入隱藏圖片的語法字串即可存檔(注意插入字串的前後要有空格)。


4. 備註

一般情形只需要使用 "display: none;" 的參數即可隱藏圖片,不需再使用 "width: 0px;" 強制把圖片寬度設為 0px。然而經實測後發現有時無法隱藏圖片,推測是本站使用了 lazy load,或許這個外掛會強制將圖片恢復顯示,因此把圖片寬度設為 0px 是買個保險的動作。

2013.7.16 補充

+Mark X 留言表示:「我想是不是在CSS裡加個 #id 比較方便操作? 例如 #abc {display: none} 一般使用Blogger編輯器的網友上傳圖片時會有 div 區塊包夾, id="abc" 要放進div比較容易快速.」

如果對 CSS 熟悉的讀者,可採用這樣的方式。設定完 CSS 後,這樣每個圖片要增加的字串只有 id="xxx",會比 style="display: none; width: 0px;" 少打很多字。




二、範例效果

如本文,文章開頭顯示的第一張圖片有 WFU BLOG 字樣,不過我在更前面的位置,擺了下面這張圖(已用語法隱形)──




2016.1.10 補充:由於 WFU BLOG 已經改用「Blogger 文章封面圖的各種呈現方式」,因此本篇文章無法看出本文描述的狀況,請改為前往展示網頁觀看效果:



1. 文章縮圖

右邊側邊欄「熱門」文章的那個區塊,按下「最新」文章後,可看到本文的文章縮圖成了上面這張圖。


2. 文章封面圖

本站的動態檢視範本,使用「Flipcard」模式時,例如進入這個網址:

可發現本文的封面圖變換了。



三、小結

因此,使用本文的技巧,動態檢視範本就能自訂想顯示的封面圖片了;順帶一提,若讀者使用 +1 或 讚按鈕分享文章時,自動抓取的縮圖,也會是這張隱藏起來的圖片。


更多 Blogger 相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP