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

一直以來 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 相關工具：