2015年9月1日 星期二

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

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

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

沒有留言:

張貼留言注意事項:

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

TOP