みーのぺーじ

みーが趣味でやっているPCやソフトウェアについて.Python, Javascript, Processing, Unityなど.

DrupalでCKEditor, Insert, Colorboxを連携させる

Drupalで記事を書くにはCKEditorなどWysiwygエディターが有用で,画像を挿入するにはInsertモジュールが便利です.Drupalで画像をクリックして拡大表示するようにするには,Colorboxを使用するのが便利です.これらの機能が連携するように設定する方法を紹介します.

インストール

以下のモジュールをダウンロードします.

  • Libraries API 7.x-2.2 (download)
  • Colorbox 7.x-2.8 (download)
  • Colorbox - a jQuery lightbox (download)
  • Insert 7.x-1.3 (download)
  • Wysiwyg 7.x-2.2 (download)
  • CKEditorなど Wysiwygに対応したエディター

Colorboxは,Libraries APIに依存しているので,インストールする必要があります.インストール方法は通常のモジュールと同様に,/sites/all/modules/にアップロードすればよいです.Colorbox本体は,/sites/all/libraries/にアップロードします.つまり,以下のようなパスが存在すればよいことになります.

  • /sites/all/libraries/jquery.colorbox-min.js

最後にDrupalのmodule画面からColorboxとInsertとWysiwygを有効にします.

Wysiwygの設定

CKEditorの設定をしていきます.まずは,Configuration > Content authoring > Wysiwyg profiles を開きます.

f:id:atsuhiro-me:20151104005227p:plain:w300

ここではFiltered HTMLにCKEditorを設定します.Editorをコンボボックスから選択して,Editを開きます.

f:id:atsuhiro-me:20151104005230p:plain:w300

Buttons and pluginsという項目を開いて,必要な機能を有効にします.これをしないとCKEditorが機能していても何もできないので.

f:id:atsuhiro-me:20151104005232p:plain:w300

以上でWysiwygの設定は完了です.

Content types の設定

Structure > Content types を開きます.ここではArticleの設定をしていきます.manage fieldsを開きます.

f:id:atsuhiro-me:20151104005235p:plain:w300

Add new fieldから以下のようにImagesという項目を追加します.これは,Structureに画像の配列を追加することで記事ごとに画像を管理するための作業になります.ここに画像を追加して,Insertモジュールで本文にリンクを挿入するわけです.

f:id:atsuhiro-me:20151104005237p:plain:w300

設定できたら詳細を設定するためにEditを開きます.

f:id:atsuhiro-me:20151104005240p:plain:w300

少し下に行ったところに,Insertという項目があるので,開きます.Enable insert buttonを有効に,Enabled insert stylesの中から,Colorbox Medium (220x220) を有効にします.

f:id:atsuhiro-me:20151104005242p:plain:w300

その下にある,Default insert styleをColorbox Medium (220x220)と直上と同一にしておきます.(この設定はあくまでも便利にするためのもので,必須ではありません.)

f:id:atsuhiro-me:20151104005244p:plain:w300

さらにその下にある,Image field settingsのNumber of values をUnlimitedにします.こうすることで,任意の数の写真をアップロードし関連付けることが可能です.

f:id:atsuhiro-me:20151104005246p:plain:w300

この状態だと,Imagesで設定した画像が本文の最後に一覧として表示されてしまうので,本文では非表示にしておきます.Structure > Content types > manage display より ImagesのFormatをHiddenにします.

f:id:atsuhiro-me:20151104005248p:plain:w300

以上で設定は完了です.

画像の挿入の仕方

新しいArticleを開いて,写真を挿入していきます.ImagesのAdd a new fileから画像を選択してアップロードすると,Drupalはオリジナルとstyleで指定した縮小画像を自動で生成し保存します.

f:id:atsuhiro-me:20151104005251p:plain:w300

次に,StyleがAutomaticではなく,Colorboxなっていることを確認します.Automaticだと画像のオリジナルが表示されるだけでColroboxによる拡大表示はされません.

f:id:atsuhiro-me:20151104005253p:plain:w300

そしてInsertボタンをクリックします.

f:id:atsuhiro-me:20151104005257p:plain:w300

するとこのように本文中に画像が表示されます.

f:id:atsuhiro-me:20151104005259p:plain:w300

以上で完了です.

Colorboxで拡大表示される画像の解像度を指定する

Colorboxの Insert module settings の Image style をNoneにしておくと,オリジナルの解像度で拡大表示されます,オリジナルだとファイルサイズが大きすぎるならば,縮小されたサイズを指定するとよいでしょう.

f:id:atsuhiro-me:20151104005302p:plain:w300

Lightbox2からColorboxに移行する

みーは以前はLightbox2を使っていたのですが,あまり開発が積極的でないようだったので,Colorboxに乗り換えました.ColorboxもLightbox2もhtmlの書き方はほとんど一緒なので,移行は簡単でした.

両方とも,<img>タグで縮小画像を表示しておいて,<a>タグでオリジナルへのリンクを貼り,<a>タグの中にclassとrelを適切に指定すれば自動でやってくれるという仕組みです.Lightbox2では,class="colorbox cboxElement" rel="gallery-all"などと指定すればよく,Colorboxでは,class="colorbox cboxElement" と rel="gallery-all"を指定します.したがって,DrupalでMySQLを使用してる場合はphpmyadminなどを使用して,field_data_bodyテーブルをエクスポートしてdropした後,テキストエディタを使って,class="colorbox cboxElement" rel="gallery-all"をclass="colorbox cboxElement" rel="gallery-all" にすべて置換し,データベースにインポートするのが一番簡単だと思います.実際に以下のように一括置換してデータベースを更新しましたが,すべてうまくいきました.

f:id:atsuhiro-me:20151104005305p:plain:w300

これらの方法で,Drupalで画像を簡単に扱えるようになると思いますので,参考にしてみてください.