在 ckeditor 編輯器中快速上傳圖片並加上圖說

圖說(caption)是種文體,用簡短的文字說明圖片或照片中的內容,幫助讀者了解圖中的背景脈絡或者聚焦到作者所意指的部份上去。報章雜誌與圖片多的工具書常常用圖說來增添文章的可讀性與豐富性,比方說旁邊這張(沒有啦,這張其實沒有圖說,只是很好像所以就拿來當代表圖片...)。

但是在網路上,通常只有新聞或雜誌等媒體網站會顧及到讀者的閱讀習慣而在網頁圖片旁加上圖說。我甚少看到圖文部落格會替圖片加上圖說,若有也都是一行內文+圖片的這種作法。圖一多,文章就像是蓋大樓一樣愈來愈高,缺乏像看雜誌圖文的感覺。若稍加排版過,讓圖片可以左右浮動,則會讓文章看來較為生動活潑。不過這時若缺了圖說作為引導,文章就容易看來欠缺組織和層次。比方說要撰寫有連續教學步驟和多張截圖的教學文時,截圖若沒有圖說,讀者得花力氣去猜圖片和哪段內容相關,容易失去焦點。

需求

由於常需要在內文中編排圖片排版的靈活性以及需要圖說的功能,我開始去尋找能夠滿足以下需求的模組或模組搭配:

  1. 可以直接在編輯器中上傳多張圖片,步驟愈簡單愈好。(像 IMCE 這樣的工具仍嫌麻煩)
  2. 可以直接將圖片的 alt 或 title 文字轉換成圖說,不需另外添用欄位輸入。
  3. 有簡單的過濾條件機制,不需要將所有的圖片的 alt 或 title 文字都轉成圖說(比方說常在內文中插入的「表情圖片」cheeky就實在沒必要再加圖說了)。

在 drupal 6.x  架站經驗與印象中,有看過人家用 inser + image caption 模組來達到近似的需求。image caption 可以做到前述的 2. 和 3. ,自動將含有 CSS 類別 .caption 的圖片轉換成含有圖說的圖片。insert 模組則是用來和 imagefield 模組結合,透過 imagefield 上傳圖片並在顯示圖片時插入指定的 .caption 的 CSS 類別,insert 模組則是會在圖片預覽縮圖旁顯示額外的 「插入」按鈕,讓作者把指定的圖片插到內文驅的游標處。

這樣的作法雖可以滿足近似的需求,但基本上違反 1. 的要求:上傳與插入圖片的步驟要愈簡單愈好。imagefield + insert 的搭配需要至少兩個步驟(上傳、插入),而且無法做到一次插入多張圖片的功能。(插到第3張你就會煩了)。

模組搭配

搜尋替代方案的結果,找到了 onclickupload + jcaptioin 的這個組合搭配。捨棄 image caption 而換用 jcaption 的理由,是因為看到了一篇教學文章,談到 jcaption 能夠做到 image caption 的功能但彈性更大。jcaption 可以允許你轉換自訂 CSS 類別的圖片 metadata 轉換成圖說,比方說 .node img.caption 就只限定轉換節點中的有 ,caption 類別的圖片,而 .sidebar img.small_pic 則會轉換邊欄中有 .small_pic 的圖片。可以自訂多個類別規則,方便又有彈性。此外還能夠選擇是否繼承圖片本有的各種屬性,像是左右浮動、連結、寬度等等,甚至可以在後台就定義好圖說文字的 CSS 樣式,或以動態換燈的方式的呈現圖說等等。

另一方面,使用 onclickupload 來取代 insert + imagefield 的理由也是和改用 jcaption 的理由相同:功能一樣但彈性更大。onclickupload 厲害之處是真的能夠做到「一鍵上傳+插入多張圖片」的功能,而且支援各種編輯器與相關模組(比方說 wysiwyg)。除此之外,它在上傳的過程中可以自動替你在圖片中加上預定的 CSS 類別,又可以搭配圖片樣式,顯示成指定尺寸的縮圖,甚至自動以 colorbox 來顯示原尺寸圖片。(沒錯,你在本頁看到的圖片效果都是透過 onclickupload 做到的)最厲害的是,onclickupload 不只能夠上傳圖片,還可以上傳各種格式的檔案,可以讓你直接把選取的文字變成連結到上傳檔案的連結。你不僅能夠即時上傳檔案,還可以針對不同的檔案格式設置不同的樣板(template),指定好各類檔案的上傳目的地資料夾以及附加不同的 CSS 類別等等。是個殺手級的應用模組。

安裝與設定

安裝與設定這兩個模組並沒有什麼太特別的地方,只除了說 onclickupload 還需要你另外下載一支 flash 程式並放置到 sites/all/libraries/swfupload 底下去。

如果是用 drush 來安裝,指令如下:

下載模組

drush dl jcaption, ocupload

啟用模組

drush en -y jcaption, ocupload

啟用之後可以利用 onclickupload 提供的指令去下載需要的 flash 程式,會自動放到指定的位置。

dursh ocupload-dl-library

一切無誤的話,接著就是去模組設定頁進行設定:

jcaption

jcaption 的設定比較簡單,主要就是指定要轉換 alt 還是 title 文字,並設置要轉換哪個 CSS 類別的圖片。可搭配階層式的語法精確指定哪個區域、甚至區塊裡頭的圖片項目。如右圖1.所示。

接著是設定轉換後的圖說是否要繼承圖片原有的屬性,像是左右浮動或文字置中,還有連結等等。如圖2.所示。這邊大家可以依照自己的需求去做調整,不見得所有的屬性都要繼承,有時候反而會造成版面絮亂的情況。

最後是看你要不要直接在這裡指定圖說文字的 CSS樣式,以及是否用動態文字的方式呈現圖說內容(幻燈片效果)。見圖3.。

onclickupload

由於功能較多,onclickupload 的設定比較複雜,這邊只說明一下跟圖說有關設定項目。首先是讓圖片自動加上特定的 CSS 類別,讓 jcaption 能夠針對此類別產生圖說,避免讓所有的圖片都冒出圖說來。我們必須修改 Template to insert into editor 項目中的值,把自訂的 CSS 類別或 id 加入到 img 標籤裡頭。這邊請記得配合 jcaption 那邊的設定值了。

此外,我們希望圖片在上傳的時候就自動產生特定尺寸的縮圖,方便排版。這裡就要打開 Options for images 欄位集,設定使用合適的圖片樣式(image style),讓上傳圖片可以自動擁有適合排版的大小(建議不要太大,因為網頁文章的段落通常不會太長,圖片尺寸太大會讓讓你很煩惱排版工作)。另可選用是否要以 colorbox 模組所提供的光箱效果來開啟原始尺寸或特定尺寸的大圖。如果擔心原始圖片太大而無法完整顯示在螢幕上的話,也可以考慮限制圖片的最大解析度,避免上傳過大的圖片。

最後要記得去編輯器的設定選項中把 onclickupload 的按鈕圖示給拉到編輯器的工具列中,方便使用者做到一鍵上傳與插入圖片。

使用

以上的設定完成後,我們就可以在內容編輯器中使用 onclickupload + jcaption 帶來的「快速上傳與插入圖片並加入圖說」功能了。按下 onclickupload 的按鈕會直接跳出瀏覽視窗,詢問你要上傳哪些圖片。你可以選取一張或多張圖片,按下 ok 按鈕後,就會看到編輯器右下角出現上傳的進度列圖示。若一次上傳多張圖片就會看到多個圖示。

當所有上傳工作完成後,就可以看到指定尺寸的縮圖都出現在當前游標處。這時候可以利用編輯器的「圖片屬性」編輯功能來進行排版與加入圖說文字。

完成之後不會立刻看到圖說文字,因為轉換的工作是在節點顯示頁面才會進行。儲存節點內容後,就會在檢視畫面中看到剛才輸入 alt 或 title 的文字被轉換成圖說了。若有使用 colorbox 效果,可點選縮圖看大圖的完整細節。

從此以後,插入圖片與加上圖說就不是一件令人感到痛苦的事情啦!yes

備註

  1. 由於 onclickupload 會需要直接與伺服器連結以處理檔案,安裝與測試的過程請切記不要在「網站維護模式」下進行,以免測試失敗。
  2. 如果認為使用編輯器輸入 alt 或 title 文字還是挺麻煩,可以利用 onclickupload 編寫 img 標籤的功能,先把預先格式化的 alt 或 title 文字寫入(比方說「圖+自動編號+檔名」之類的),減輕未來的工作負擔。
Area: