TimThumb 超強PHP縮圖程式,搞定WordPress縮圖功能

Others, Wordpress

當寫程式碰上了圖像的處理,真的是一件麻煩事,因為你要用程式的方式去解決圖的問題,比方說縮圖,你就要用一堆數字然後去想像並裁切,如果沒概念根本不知道如何做起?別擔心,現在我們可以透過一支PHP程式「TimThumb」來幫我們做到縮圖的工作,而且這支程式還可以讓你輕鬆嵌入任何程式之中,就算是WordPress也可以套用這個程式模組哦!

事實上,這支程式蠻多網站有在使用的,其中又以WordPress佔了絕大多數,我想應該是早期WordPress並沒有提供特色圖片(縮圖)功能,所以大家會透過寫程式的方式達到這樣的錯用,因為直接使用圖片並利用語法強制壓縮,圖片會變形不好看,所以必須要透過TimThumb來壓縮,讓圖片變得比較好看,因為這支程式的壓縮並不是傻瓜式的強制縮小,而是跟Facebook很類似的縮圖方式。

我想如果你對資安有些研究,相信你對TimThumb並不陌生,因為這個php在2011年8月出了安全漏洞的問題但問題已經補起來了,所以大可放心的使用,因為香腸自己也有使用這支程式哦!這支程式主要是起源於WordPress的佈景「Mimbo Pro」,後來變成了一個專案,目前程式放在Google Code上面。這支程式支援了大多數的圖片格式,JPG、PNG、GIF都支援,並且會利用快取來加速,提高效能。

TimThumb 主要用途是在圖片的裁切上,除了可以按照預設的模式替圖片進行裁切之外,進階使用的話也可以自訂裁切的方式。同時,您也可以透過這支程式來進行遮罩(filters),功能不少喔!還有,這程式還可以外部圖片進行壓縮,不論哪一個網站,只要是圖片通通可以直接把網址丟給這支PHP程式進行壓縮,不過前提是主機要支援GD library才會運作這支程式。
第1步 將程式下載並儲存為timthumb.php後,用NotePad++開啟,找到「$ALLOWED_SITES」這個陣列,在裡面可以看到允許縮圖的白名單,記得按照規則把自己的網站加入清單,不然圖片會無法輸出。

【註】原先白名單用不到的可刪除,並請額外加上有使用的來源圖片網址。

timthumb_1

第2步 以WordPress來講,我們可以在佈景主題目錄下建立一個「script」資料夾。

timthumb_2

第3步 接著,把程式放在「/script」目錄下,同時,在此目錄別忘了建立一個「cache」資料夾,權限記得設定777,這樣未來圖片快取才有辦法寫進去。

timthumb_3

第4步 至於程式的引用方法如下,記得設定高寬,否則會跑預設。

<img src=”<?php bloginfo(”template_url’); ?>/script/timthumb.php?src=圖片位置&h=圖片高度&w=圖片寬度&zc=1″ />
<?php bloginfo(“template_url’); ?>:這是WordPress輸出佈景主題網址的語法,可以帶換成您網站的網址,簡單說前面就是要這支程式的路徑。

參數解說:

src:圖片網址
h:height,圖片高度(ex. 150)
w:width,圖片寬度(ex. 122)
q:quality,圖片品質(100為原圖)
zc:zoom crop,是否剪裁,0=否,1=是。預設從圖片中央進行剪裁。
第5步 效果展示,香腸imXD5本來用強制壓縮(等於網頁跑原圖),現在改用timthumb進行縮圖快取,加速網站的開啟速度。

timthumb_4

第6步 可以看看官方的展示,預設採用中間裁切,這是外部圖片裁切並快取到網站上。(範例)

【註】官方遮罩應用,有興趣可以看看,請按這裡。

timthumb_5

TimThumb 使用心得與注意事項

儘管之前有發生漏洞(目前已經修復),但不可否認的這支程式的實用性。它可以幫圖片做最佳的圖片裁切,同時支援多種格式的輸入,還提供快取的機制可以減輕網站的負擔,對於寫程式的人來講,可以免去圖片處理這一部分的開發,可以把時間省下來做更多的事情。當然,以香腸自己網站的做法,我本來是將程式丟在自己的主機上跑,可是發現沒多久就300個快取檔案,如果持續進行,很可能把主機空間吃掉、流量吃掉。

所以換個做法,把程式丟到圖床上面去跑,以降低主站所耗用的資源,同時快取圖片也可以存放在自己的圖床上,免去原站的空間浪費,對於網站優化是很大的幫助。因為有些程式並不能這樣分離進行,對圖片吃很兇的網站來講,是一件麻煩事。再加上,因為香腸當時使用WordPress的年代過於久遠(2.1),程式本身並沒有提供特色圖片可以使用,如果現在要一張張加回去,可能會暈倒,透過timthumb來處理,可以大大解決這些惱人問題。

不過在使用上有一點要注意的是,程式預設是有開啟圖片來源限制,如果您嫌棄他要設定很麻煩,你可以改程式將它關掉,但是關掉相對的風險就來了,如果大家都知道你的程式沒有鎖定圖片來源,很可能就利用你的程式跑它網站的圖,把你的網站當成它的縮圖圖床,這樣就麻煩了。所以在開放時千萬要小心,建議還是有鎖定網站會是一個比較明智的做法。

(轉自香腸炒魷魚)

Post a comment

 

Loading...