2013年7月16日

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

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 相關文章:

5 則留言:

  1. 板主您好:

    想請教一下,若是想在部落格放上「封面圖片」,

    該圖片的長、寬,應該要設定成 多少 * 多少?

    試了好幾次,總是不甚理想。

    煩請解惑

    謝謝

    回覆刪除
  2. <258252412544374339>(以上內容請勿刪除,從括號之後開始留言)原以為你問的是每篇文章的封面圖,看了你在社群的討論串,原來你要放的是整個部落格的封面圖。那麼如跪婦阿冠的回答,在Blogger後台可找到部落格版面的尺寸,再製作符合尺寸的圖上傳即可。

    回覆刪除
  3. <8017932048637911381>(以上內容請勿刪除,從括號之後開始留言)感恩!又會了一件事!謝謝!

    回覆刪除
  4. <4821861872005557020>(以上內容請勿刪除,從括號之後開始留言)標題上方的圖片是利用「Blogger 文章封面圖 (縮圖) 的各種呈現方式」:http://www.wfublog.com/2015/09/blogger-post-cover-first-image.html,這篇文章的方法顯示出來的,請注意這張圖片並沒有出現在文章內容之中,文章標題下方才是文章內容。

    回覆刪除

張貼留言注意事項:

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