2015年4月10日 星期五

Drupal的精簡版光箱:Colorbox(彩箱)

原始發布日期:21 四月, 2011 16:06
就如「Drupal網站的光箱特效:Lightbox2」所介紹的,在Drupal上有好幾個Lightbox(光箱)技術相關的模組可供選擇,但是目前只有Colorbox(彩箱)已移植到Drupal 7。

就數量龐大的Drupal 6安裝數來看,我相信Lightbox2遲早都會移植到Drupal 7的。另外,Lightbox2的設定功能也較Colorbox多樣化,一些需要使用更進階設定的使用者可能還是希望用Lightbox2,我想這都是它遲早都會移植過來的原因。只是,Drupal 7都已經推出近半年了,就是還沒有動靜,實在讓人有些心急。總之,時下若要在Drupal 7上安裝光箱特效,Colorbox是唯一的選擇。



↑ Colorbox與ImageCache,ImageField,及Insert模組的組合是最佳的應用方式,可讓使用者貼文章時直接上傳圖片插入具光箱特效的圖片,並對圖片進行排版編輯


Colorbox使用經驗:有模組相衝問題

Colorbox是精簡版的Lightbox,最早Colorbox的作者為Drupal開發的是thickbox模組,但後來將所有開發心力移轉到了Colorbox,並建議使用者轉用Colorbox。

不過我在Drupal 6遇到了一些很嚴重的問題,我不知這是普遍性的問題,還是因為我的網站上有模組相衝的問題,但在此說明一下,讓有意安裝者也可注意一下這些問題。我在Drupal的技術討論區裡發現到,也有很多人遇到和我一樣的問題。

首先是Colorbox根本沒作用──就是安裝好模組之後,操作上也完全沒問題,但最後這個特效就是跑不出來。

我完全不知問題出在那裡,總之,我想我在Drupal 6上已有用了Lightbox2,也在Drupal 7上用了Colorbox,然後也做過了好幾日的好幾波的徹底檢查與研究。我想至少有七、八成的把握可說:問題是出在模組的問題上而不是我自己的使用能力上,只是問題在那裡真的不知。

我在猜測,可能與第二個問題有關──就是可能與其他模組相衝了。

我遇到的第二個問題是,與網站的Javascript程式會相衝,特別是Gmap。一安裝上Colorbox之後,網站上Gmap全部相關的應用都停擺不見了。

因為Gmap是我Drupal 6網站的重要功能,所以並沒能移除Gmap試試看是否因為兩者相衝而讓Colorbox無法作用。

我也不確定Drupal 7上會不會有這個問題,因為我的Drupal 7網站功能相較之下較簡單,也沒Gmap功能。

目前在Drupal 7上使用感覺還不錯。

Corobox的安裝

在Drupal上安裝Colorbox真的很不容易!而且較安裝一般模組複雜,請務必看完說明之後,循序安裝,以免出錯。

首先,如果Drupal 6必需先下載安裝jQuery Update模組,因為Colorbox需要jQuery 1.3以後的版本才可運作,但Drupal 6內建的jQuery只到1.2,所以必需先安裝jQuery更新模組之後才能夠使用Colorbox。安裝並啟用jQuery Update模組之後,就會自動更新了。若不確定,可以到/admin/reports/status頁面下確認jQuery是否升級到1.3以後的版本;若未升級,則關閉模組再重新啟用。

>> jQuery Update

Drupal 7使用者則不需升級jQuery。

▽ 圖說:Drupal 6使用者必需先安裝jQuery Update升級jQuery版本才能夠使用Colorbox;Drupal 7使用者則不需要



接下來Drupal 6和Drupal 7的安裝方式都一樣:

1. 安裝彩箱外掛:到Colorbox官網下載Colorbox外掛程式(下載連結在網頁左上方),並將它解壓縮上傳到Drupal網站的涵式庫裡(sites/all/libraries目錄下。如果你還沒有開出libraries,請自行新增該目錄匣)

外掛下在網址:

http://colorpowered.com/colorbox/

http://colorpowered.com/colorbox/colorbox.zip



2. 在Drupal 7上安裝Colrobox模組

>> 模組下載

模組安裝位置:sites/all/modules/

(我不大確定直接和其他模組一樣安裝在modules匣裡行不行,印象中先前這樣安裝好像有出過問題,所以還是建議依照使用說明書自行建立該資料夾,並把模組安裝在該目錄裡)

3. 啟用Colorbox模組




4. 設定Colorbox




Colorbox的使用

Colorbox的使用方式與Lightbox差不多,個但要手動在HTML上加入程式碼似乎不容易,個人認為,在Drupal上Colorbox與ImageCache、ImageField(CCK的子模組),最後再加上Insert模組的結合應用,對上稿系統的使用者來說是最為簡便與經典的。

相關的應用細節,可參考Lightbox2+Drupal 6一文。這裡直接跳到結合ImageField與Insert模組的組合應用範例來做介紹。

與ImageField的組合

ImageField是CCK下的一個子模組,這個模組可以讓使用者在內容類型裡自己定義一個可以放入圖片的欄位。另外,還需要有ImaegCache模組才能夠設定好這個功能。

ImageField和ImageCache在Drupal 7已放到了核心模組裡不需另外再下載與安裝;但若是Drupal 6使用者,則必需先安裝好這兩個模組。

以下是簡單的步驟:

1. 新增圖像樣式:為你要插入Colorbox特效的圖片設定一個自己的圖像樣式(也就是縮圖樣式)。這一個步驟也可省略,直接採用系統預設的大(large)、中(medium)、小(thumbnail)三種樣式。



↓ 可以為Colorbox新增專屬的圖像樣式,也可直接採用系統預設的(上圖)




2. 新增field_image欄位:到想要加入光箱特效的內容類型(例如:部落格)找到「管理欄位」,然後增加一個field_image的欄位(從既有欄位去選即可),並依指示做好相關設定。 (這裡我們將欄位名稱設為「插入圖片」,使用者可依自己的喜好設定)




↓ 插入圖片欄位的相關設定









3. 設定顯示模式:同樣在內容類型的管理介面裡,點選「管理顯示」標籤,做好相關的顯示設定(記得要選擇「Colorbox」的顯示方式)。



如果你希望使用者在上傳了圖片之後,具光箱特效的圖片自動放到文章裡,不需使用者再做任何事,那麼到此就已完成。

但是這樣的做法會有個問題:圖片的位置及排版,將會非常固定,使用者無法做任何調整與編排,只能依管理者在系統設定好的方式呈現──但在某些情況下,這可能會是你系統設定的目的。

如果你希望讓使用者可以彈性編排光箱特效圖片的大小以及位置,那麼建議在「管理顯示」上,把「預設」及「摘要」的顯示方式,全部設定為「隱藏」,然後再整合「Insert」功能。

加入Insert(插入)功能

在做好以上的所有設定之後,接著安裝Insert模組,並啟用。

這時到當時所設定好的內容類型的「管理欄位」,進入編輯當時設定的field_image欄位。這時可以見到多出了一個Insert的設定選項。



記得勾選「Enable insert button」(開啟「Insert」按鍵),這樣才能夠讓使用者上傳圖片之後插入圖片。

接著在Enabled insert styles裡勾選出讓使用者可以選擇插入的圖片樣式,在這裡勾選的選項,未來都將出現在Insert按鍵旁的下拉式選單裡。

裡面有多個以Colorbox為開頭的的,就是具Colorbox特效的縮圖,如「Colorbox thumbnail」就是在文章內插入一個thumbnail大小的光箱特效圖。

你也可以選擇「原始圖像」,讓使用者插入原始的圖檔。




接著建議一定要設定Default insert style:就是系統預設的插入圖片類型。

最後「多值」一欄(屬field_image的設定,非insert)則自行依照系統設計需求去設定。該欄如果選擇1,則使用者只能上傳一張圖片,選擇5則可上傳五張。

但建議選擇「無限制」,然後以圖檔大小以及單一node可上傳圖片容量等限制來限制使用者的上傳。

這時使用者在張貼文章時,應該可以開始隨意插入光箱特效的圖片了。 〔請參考文章的第一張圖〕

沒有留言: