2015年9月15日

讓 Blogger 留言能顯示圖片及 Youtube 影片﹍將網址字串轉換為圖片

A+
一直以來 Blogger 留言不開放貼圖語法,這是很可惜的事,畢竟很多時候「一張圖勝過千言萬語」,搭配影像的輔佐可節省許多文字的描述。

當然官方應該也是有其考量,若開放了 img 標籤的使用,萬一訪客放了高解析大圖、或是大量貼圖用來惡搞網站,導致網頁開啟速度被癱瘓是有可能的;更甚者在圖片網址夾雜惡意連結,都有可能造成資安危機。

因此,已經考量清楚的站長,決定開放 Blogger 留言區塊讓訪客貼圖的話,可前往「二、安裝程式碼」。



一、顯示圖片的原理


1. 舊外掛原理

就像 Discuz 這類的論壇,以前的 Blogger 外掛處理這件事時,需要訪客手動在圖片網址前後加上 "[img]" 這樣的字串,程式才有辦法判斷這是一張圖片,再進行轉換。

這種方式的缺點為,不熟悉 code 的訪客不會使用,或是沒有注意使用說明的話,就不知道站方提供了這個方法來顯示圖片,那麼通常只有熟客才會知道這個 Blogger 留言可顯示圖片。


2. 直接轉換圖片網址

讓訪客無痛使用貼圖的方式,就是直接在留言貼圖片網址,而程式直接將網址字串轉換為圖片語法。

上次處理「將網頁所有網址字串轉換為超連結」後,對這類功能已經駕輕就熟,一樣利用正規表示式就能將圖片網址、Youtube 網址字串,直接顯示為圖片及影片。

在「Blogger 中文論壇」發表文章時,有個 "附加連結" 的功能,當貼上 "圖片" 或 "Youtube" 網址時,就能直接顯示圖片或影片,便是使用了本文小工具的程式碼。



二、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

1. 準備動作

請到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<style>
.comments .convertImgUrl img { /*留言區圖片*/
margin: 10px;
max-width: 100%;
}
.comments iframe { /*留言區 youtube*/
display: block;
margin: 10px auto;
}
</style>

第一行可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jquery,以免重複安裝。

其餘的部分,如果對 CSS 熟悉可自行修改參數,請參考註解字串的提示。

2016.7.19 補充:如果需要強制每張圖片都是同樣的大小,可在 max-width: 100%; 的下一行,新增參數:width: 300px; → 代表圖片寬度一律為 300px,可自行修改數值。


2. 安裝程式碼

接著請搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


這個工具預設作用於 Blogger 留言區塊,也就是紅字參數 ".comments" 的區塊。

如果要使用在別的區塊,請自行將紅色字串改為別的區塊,例如 "." + class 名稱、或是 "#" + id 名稱。



三、展示及測試效果


想先看一下效果,或是測試留言能否出現圖片、Youtube 影片,請前往這個展示頁面:


只要在留言之中插入 http 開頭的圖片網址字串、或是 Youtube 網址,網址字串後面用 "空格" 或 "Enter" 跟其他文字區隔開來,程式就能自動判斷,並轉換為對應的圖片、Youtube 影片顯示。


更多 Blogger 留言相關工具:


更多 Youtube 相關工具:

7 則留言:

  1. WFU我來反饋個事情。 這是碰到多次,我終於忍不住要和你說的事。 會員功能,我登陸了FB,但是每次在驗證方面,似乎都有一定的阻礙。 只是偶爾能驗證通過! 會員中心,顯示:請稍後,正在驗證會員資料...

    回覆刪除
    回覆
    1. 這樣子呀...由於您在大陸,我沒有對應的測試環境,所以也無法確定會是什麼樣的原因所造成,如果是被牆的話,那還真不知道怎麼解決...

      這樣吧,麻煩告知使用的瀏覽器、版本、作業系統,我看看有沒有需要做調整之處,可以的話,也請告知加入會員使用的暱稱為何。

      刪除
    2. 我似乎知道是為什麼了。 真的是我網絡造成的原因! 當時不知道為什麼,又奇怪的驗證通過了。 瀏覽器:Chrome 版本:49.0.2623.87 作業系統:Windows7 我的會員名稱:Xiezuo He 今天我又試了一下,也是順利通過驗證。 但是有些時候,我就真的驗證不過去。多試幾次,我也明白了, 問題應該是在我的網絡可連接性,China狗朝廷,一直用黑客的手段,阻礙我的網絡正常訪問。

      刪除
    3. 你的作業系統、瀏覽器跟我是一樣的,那麼或許就是網路的關係了。

      原本以為你是翻牆過來的呢,從你的描述,如果沒翻牆也能看到 WFU BLOG,那還真是好消息呢~~ :D

      不過沒翻牆的話,google相關網域的連結,例如圖片或 js 可能會被檔,不然就是很慢了, 那麼會員相關的 js 也就不一定能成功執行了。

      刪除
  2. 請問如何可以改變留言板上圖片的大小

    回覆刪除
    回覆
    1. 請見「2016.7.19 補充」的內容

      刪除
    2. 謝謝! 我前面已有2個jquery 1.4.4 和 1.10.2. 嘗試刪除, 更新補充內容, 但不成功. 而且出現https的問題. 我忘了之前加了什麼script, 現 upload photo, 用 blogspot photo 的 link 加 S320 size 可以在comment 顯示適當圖片尺寸.

      刪除

張貼留言注意事項:

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