TimThumb 超強PHP縮圖程式，搞定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 超強PHP縮圖程式，搞定WordPress縮圖功能

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

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

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

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

第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 超強PHP縮圖程式，搞定WordPress縮圖功能

 

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

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

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

TimThumb 使用心得與注意事項

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

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

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