WysiwygモジュールとTinyMCEの導入という投稿で、Drupal6でWYSIWYGエディタを使うためにCocoaSpaceが試した方法をご紹介しました。その記事でも触れましたが、WysiwygモジュールとTinyMCEを導入しただけでは、ノード編集画面のインターフェイスから画像をアップロードし、ノード本文に挿入することができません。そこでいくつかのモジュールを駆使してFileFieldでアップロードした画像をノード本文に挿入して、さらにリサイズしたり、別のノードで再利用したりできるようにしてみました。以下の内容はCCK、FileField、ImageFieldの基本的使い方についてはマスター(といっても面倒なことはありません)されているという前提で書かせていただきます。
今回CocoaSpaceで試したモジュールは以下のものです。
FileField Insert
この記事を書いている2009年10月15日現在、devバージョンしかありません。まだバグがあるかもしれませんが、ユーザのみなさんが使用するわけではないので導入しました。FileFieldやImageFieldの開発者であるLullabotのNathan Haugさんがコントリビュートされているので、それらのモジュールとの相性が良さそうですね。FileFieldでアップロードした画像をノード本文にインサートするためのボタンが追加されます。FileFieldでアップロードするだけだと、画像がノードに添付されるだけで、本文中にインラインで表示されません。
設定
admin/content/typesのmanage fieldsからリンクを辿り、ImageFieldで作成したフィールドの編集画面に行きます。画面を少し下にスクロールすると『HTML insert』という項目がありますので、その中の『Enable HTML insert』にチェックを入れます。
ImageField編集画面 - Enable HTML insertにチェックを入れます。
Image Resize Filter
Nathan Haugさん作。TinyMCEなどのWYSIWYGエディタを使用しているときに、FileField Insertで挿入した画像をマウスでリサイズできます。WYSIWYGエディタを利用していなくても、画像の縦か横のいずれかの値を指定することで画像サイズを調整できます。下にご紹介するスクリーンキャストでその様子を確認してください。
設定
admin/settings/filtersからImage Resize Filterを有効にしたい入力書式を選択します。CocoaSpaceではFiltered HTMLを選択しました。Filtered HTMLで使用する場合にはadmin/settings/filters/1の『フィルタ』という項目で『Image resize filter』にチェックを入れます。Filtered HTMLのデフォルトの状態では<img>タグを使用できませんので、admin/settings/filters/1/configureから追加するのを忘れずに！Full HTMLを使用する方はその心配はありません。
入力書式設定画面 - Image resize filterにチェックを入れます。
FileField Sources
Nathan Haugさん作。こちらもこの記事を書いている2009年10月15日現在、devバージョンしかありません。上記2つのモジュールやWysiwigモジュールなどは下にご紹介するスクリーンキャストに登場しますが、このモジュールはdrupal.orgを閲覧中に偶然見つけました。下のIMCEとともに使用することで、新しいノードの編集の際、以前アップロードした画像をブラウズ・再利用できるようになります。
設定
特になかったと思います。インストールするとノード編集画面のファイルフィールドの部分にファイルブラウザ(IMCE併用の場合)などの機能が追加されます。 CocoaSpaceではReference existingとRemote URLは無効にしました。
ノード編集画面 - FileFieldの部分にファイルブラウザという項目が追加されます。
IMCE
ファイルのアップロードやノードに画像を挿入する際に使用するファイルブラウザとして人気のモジュールです。便利なモジュールなのですが、CCKやViewsがDrupalサイトに欠かせない存在となっている昨今、それらのモジュールと必ずしも仲良しとはいえないこのモジュールを導入するとは思っていませんでした。しかし、上記のFileField Sourcesのプロジェクトページを見ていると、デフォルトの状態でIMCEと併用できると書いてあったのでインストールしてみました。そのような事情もあって、CocoaSpaceではIMCEからのファイルのアップロードは無効にし、TinyMCEの画像ボタンとの併用も使用していません。すべてのファイルをFileField(ImageField)からアップロードするようにしています。FileField以外でアップロードしたファイルは、IMCEでブラウズできるものの、FileField Insertでノードに挿入することはできないようです。
設定
admin/settings/imce/profilesからウェブマスター用、承認済みユーザ用などのprofileを設定します。CocoaSpaceの場合は使用すると思われる機能はブラウズだけですので、他の機能は無効にしました。ディレクトリパスはFileFieldのパスに合わせました。
IMCEプロファイル編集画面 - CocoaSpaceではブラウズ以外は無効に、そしてパスをFileFieldパスに合わせました。
IMCEをインストールすると、プロファイルを割り当てられたロールに属するユーザのページにファイルブラウザのタブが現れます。ここからファイルをアップロードしたりブラウズしたりする必要がある場面を想像できないのですが、どのような用途があるのでしょうか？タブが不必要で、無効化する方法をお探しの方には『不要なタブを無効化する』が参考になるかもしれません。
コメント (5)
画像とPDFのアップロード、もしくはCCKによるグループの複数追加について
初めまして、Drupalについての参考になる情報をありがとうございます。
現在、CCKを使って、画像を含めた複数の入力フィールドをまとめて追加できるようなコンテンツタイプを作成しております。
例えば、わかりやすく車を例にしますと、
(1)メーカー
(2)車名
(3)グレード (←これをひとまとめに複数個追加)
(3-1)型番 (←テキスト)
(3-2)値段 (←数値)
(3-3)写真 (←画像、PDFファイル)
といったコンテンツタイプを実現するために、CCK、Imagefield、ImageField Extendedを使用しています。
(1)、(2)はCCKで普通にテキストフィールドを追加するだけでいいのですが、(3)をひとまとめに追加していくのにImagefieldにImageField Extendedで入力欄を追加し、値の数を無制限にしています。
問題なのは、画像ファイルだけではなくてPDFファイルもアップロードしたいのですが、そのような変更はできますでしょうか？
或いは、Imagefieldに対するImageField Extendedの様に、Filefieldに入力フィールドを追加するモジュールはあるのでしょうか？
或いは、CCKでグループを複数個作成していくモジュールはあるのでしょうか？
CCK 6.x-3.x-dev、もしくはNode Reference + Viewsでしょうか
@nono さん
コメントの内容が本投稿の範疇ではなく、またImageField Extendedというモジュールを使用したことがないので、知識がなくて困ってしまいましたが、知っている範囲で2つの方法を思いつきました。
1. devバージョンですが、CCK 6.x-3.x-dev(http://drupal.org/node/484068)では、Multigroupでグループ化されたフィールドを複数作成することが可能です。
2. グレード情報専用のノードタイプ、そしてNode ReferenceとViewsを駆使して、メインのノードに関連するグレード情報をブロック表示できます。少々煩雑ですが、結構一般的な方法ですよね。
ありがとうございます
投稿の範疇外にもかかわらず、アドバイスいただきましてありがとうございます。
1.CCKの次期バージョンについては期待しているのですが、現状devバージョンのようですので、使用は控えようかと思います。
2.「グレード」コンテンツを別に作成しておいて、メインコンテンツ作成時に「グレード」コンテンツを参照するといった形でしょうか。この場合、メインコンテンツ作成の画面上から「グレード」コンテンツを編集できたりするんでしょうかね？
一般的な手法ということであれば色々と応用が利きそうな気がしますので、ちょっと調べてみたいと思います。
ありがとうございました。
解決しました
こんにちわ、nonoです。
一応落ち着きましたので、内容を報告させていただきます。
まず、フィールドをグループにして、そのグループ単位で個数を増やしていく事に関しては、CCKの次バージョンCCK3では対応可能という情報がありましたが、現時点ではまだ開発バージョンなので見送りました。
結局、Imagefield、ImageField Extendedを併用することで対応しました。
この2つのモジュールを用いて、「画像×1、テキストフィールド×任意」といったフィールドが作れますので、当初の車の「グレード」を表現できそうです。
ただ、問題点としてPDFファイルがアップロードできないという点がありましたが、Imagefieldのソースを少し触るだけで解決いたしました。
・Imagefiledの設定でアップロードファイルの種類に「pdf」を追加しました。
・アップロードファイルが「画像」であるとチェックしている箇所がありましたので、ソース上からコメントアウトしました。
→imagefield.module:200ぐらい
これで実際にPDFファイルをアップロードできるようになるのですが、画像をアップロードしたときはサムネイルが表示されるのに対し、PDFでは何も表示されずに見た目的に違和感があります。ですので、
・サムネイルを作成する際、PDFファイルだった場合は特定のサムネイルファイル(自作です)を表示する。
→imagefield.module:theme_imagefield_admin_thumbnail()
といった変更を加えて対応完了いたしました。
この度は色々とご指導頂き誠にありがとうございました。
今後も本サイトを参考にさせて頂きます。
ご希望の機能を実現できてよかったですね
@nono さん
どのように機能を実現したかのご報告ありがとうございました。私の知識不足で今回はお役に立てませんでしたが、これに懲りずに今後も情報共有していきましょう！
コメントを追加