Internet Explorer6をご利用の場合、正しく表示されない場合があります。Firefox等ウェブ標準対応ブラウザのご利用をお勧めします。

Drupalの画像管理をImageFieldで

2008年 7月 30日

以前、画像処理はImageモジュールで、と書きました。このモジュールに依存するImage assistモジュールで画像を、コンテンツやコメント作成のbody欄や、ボキャブラリの説明欄など、色んなところから画像をアップロードし、コンテンツに関連付けることができます。

アップロードされた画像自体が一つのNode(コンテンツ)として生成されるので、フロントページに表示しない、といった処置をしておかないと、コンテンツの画像と画像コンテンツの画像が重複して表示されるようになります。

サイトの環境設定>画像で、設定しておけば色んなサイズにサムネイル化してくれるので、便利なのですが、テンプレートやViewsで画像出力したりするには、どうにも不向きと感じます。例えば画像の一覧を表示し、画像をクリックするとその画像が含まれるコンテンツを表示するといった場合です。

ということで、前にも一度チャレンジしたことがあるのですが、ImageFieldに再チャレンジしてみました。

必要なモジュール

ImageFieldでMTのカスタムフィールドの画像とほぼ同じことができるようになります。サムネイル作成にはImageCacheというモジュールが必要になります。さらにImageAPIというGDやImageMagickなど実際の画像処理とのインターフェースとなるモジュールが必要になります。一方ImageFieldをフィールドとしてもたせるCCKがインストールされていることが前提で、またテンプレート設定のためにContenmplateモジュールがあると便利です。それぞれのモジュールはDrupal.orgから入手できます。

なお、ImageFieldモジュールはImageモジュールと同じコンテンツタイプで併用することができないので注意が必要です。つまり画像フィールドを設定することによりBody欄からの画像アップロードは利用できなくなります。

PHPセーフモードの問題

前回はImageCacheで躓きました。今回じっくり原因を調べてみたのですが、作成したサムネール画像を保管するフォルダを作成したりするには、サーバーのPHPセーフモードがOnになっていることが問題と分りました。

CoreserverやXREAの場合、この設定は変えられないものの、PHPをcgiとして動かすことができますので、その設定を行いました。Drupal Japanに詳しい記事があるので参考にして下さい。

ImageCacheの設定

動作環境が整ったら、ImageCacheでサムネールサイズを設定します。プリセット名で例えばsmallという名前を設定、アクションとしてScaleを選び、幅、高さをそれぞれ100(ピクセル)に設定します。もうひとつ、プリセット名midiumという名前で幅、高さを500に設定します。

CCKでフィールドの設置

次に、コンテンツの管理>コンテンツタイプ、から画像フィールドを設置するコンテンツタイプを編集あるいは、新規作成します。フィールドを追加タブを選び、フィールド名を入力し、一番下にimageが表示されているので、それを選び、アップロードできるファイル数やファイルサイズなど詳細設定します。

次に、フィールドの表示タブを選び、作成したフィールドの出力方法を設定します。ティーザー、全文それぞれのプルダウンリストにImageCacheで作成したプリセット名があるので、それを選びます。上述の場合、ティーザー(要約文)ではsmall、全文ではmidiumを選びます。

テンプレート設定

最後にテンプレート設定しないと何も表示されません。一番簡単な方法として、Contemplate(Content Templates)を使います。該当するコンテンツタイプを選び、テンプレートを作成します。ティーザー、全文それぞれの欄の下に、Variable(変数)の一覧が表示されるので、そこから$node->field_img[0]['view']を選びます。

これでコンテンツに画像が設定したサムネイルサイズで表示されるようなるはずです。いささか設定が面倒ですが、一回やればいいことなので、トライしてみてください。

Imageモジュールとコンフリクトを起こしてしまうため、Body欄に画像を組み込むことができなくなりますが、ImageからImageFieldに移行するスクリプトなども紹介されているようなので、いずれトライしてみようと思っています。

タグ : Drupal

12 Responses to “Drupalの画像管理をImageFieldで”

  1. sryu より:

    いつも大変参考になる情報をありがとうございます。

    1つのノード上で複数の画像のサムネイルを一覧表示させるような画像ギャラリーを作りたいと考えているのですが、こういった用途の場合はImageよりもImageFieldのほうが良いということでしょうか?
    Image単体でそれが実現できればそれに越したことは無いのですが、何故かfiles/imagesが見つからないというエラーのためうまく行かず、代替策を検討中にたまたまImageFieldというキーワードが目にとまり、もしやと思ったのですが。

    どうもImageFieldでできること(Imageとのちがい)がイマイチ分からないのですが、一番のメリットは何でしょうか?

  2. admin より:

    デモサイト右上の小さな写真6枚がその作例になると思います。個々のノードのImage fieldでアップした写真をImage Cacheで縮小、トリミングしてViewsで一覧表示しています。

    また、さっき投稿したばかりの記事でも紹介したチュートリアルビデオは英語ですが、インストールや設定の際の参考になると思います。

    ImageとImage fieldの最大の違いはImageが画像をノードに、Image fieldはフィールド値にすることです。データの扱い易さ、例えばViewsなどでの処理がかなり簡単になります。

    それとアップロードの際のインターフェースの出来はImage Fieldが圧倒していると思います。

  3. [...] Xamppのアップグレードではまった Published by mas10 on 2008 年 11 月 28 日 in Drupal. Tags: Drupal, perl, xampp. ことのきっかけは、Drupalのモジュールで「imagefield」を、いつも大変参考にさせていただいているThe fool on the webさんのサイトを参考にしながらセットしようとしたところからでした。 [...]

  4. nono より:

    初めまして、Drupalについての参考になる情報をありがとうございます。
    今回は、Imagefieldについて厚かましくも質問させて頂きます。

    現在、画像を含めた複数の入力フィールドをまとめて追加できるようなコンテンツタイプを作成しております。
    例えば、わかりやすく車を例にしますと、
    (1)メーカー
    (2)車名
    (3)グレード (←これをひとまとめに複数個追加)
    (3-1)型番 (←テキスト)
    (3-2)値段 (←数値)
    (3-3)写真 (←画像、PDFファイル)
    といったコンテンツタイプを実現するために、CCK、Imagefield、ImageField Extendedを使用しています。

    (1)、(2)はCCKで普通にテキストフィールドを追加するだけでいいのですが、(3)をひとまとめに追加していくのにImagefieldにImageField Extendedで入力欄を追加し、値の数を無制限にしています。

    問題なのは、画像ファイルだけではなくてPDFファイルもアップロードしたいのですが、そのような変更はできますでしょうか?
    或いは、CCKでグループを複数個作成していくモジュールはあるのでしょうか?

  5. TAK より:

    nonoさん、こんにちは!

    PDFとかをアップロードするのであればFileFieldです。Drupal6であればImageFieldをインストールした時にFileFieldをインストールしているはずです。CCKでFileField選択後ファイルアップロードを選択、次のページで拡張子やファイルサイズの制限、アップロード数の制限等を設定します。ちなみにコアモジュールにあるUploadよりこっちの方がテンプレートの設定等ずっと使い易いと思います。

    またCCKのFieldgroupを有効にして(3-1)(3-2)(3-3)をひとつのFieldgroupにするとフィールドをグループ化できます。

    大容量のPDF等をアップロードする場合は、レンタルサーバーなどでは、php.iniでアップロードできる容量を大きくしておく必要があると思います。

  6. nono より:

    アドバイスありがとうございます。

    FileFieldはインストールしてあります。PDFはこちらの範疇ですね。
    ただ、画像ファイルをアップロードした時にサムネイル表示できればいいなと思い、何とかImagefieldの方でPDFもアップロードできないかと思案しておりました。

    >またCCKのFieldgroupを有効にして(3-1)(3-2)(3-3)をひとつの
    >Fieldgroupにするとフィールドをグループ化できます。

    実現したいのは、この(3-1)(3-2)(3-3)をグループ化した上で、「グレード」というグループを複数個(無制限)追加したいのです。つまり、「画像(PDFファイル)+テキスト+テキスト+・・・」のフィールドを作りたいのですね。

    Imagefieldで、ソースを少し変えてPDFファイルをアップロードできるようにはなったので、Imagefield Extendedと合わせて「画像(PDFファイル)+テキスト+テキスト+・・・」のフィールドは作れたのですが、PDFファイルの場合はサムネイルのプレビューが無くて(画像ファイルはサムネイル表示される)、ちょっと見た目で違和感がある状態です。

    サムネイル表示とまではいかずとも、PDFファイルのときはそれとわかる特定の絵を表示したく、現在調べている所です。

    或いはちょっと考え方を変えて、Imagefieldに対するImageField Extendedの様に、Filefieldに入力フィールドを追加するモジュールについても探しています。

    何か情報ありましたらまたご教授下さい。

    ありがとうございました。

  7. TAK より:

    画像+テキストのフィールドとしてImageFieldのDescriptionを利用したことがあります。この辺ご参考になるかも知れません。

    PDFの画像についてはそれ専用のImageFieldを作って、その画像をPDFのFileFieldでアップロードしたファイルのパスへのリンク元にするという方法はいかがでしょう?デフォルト画像を組み込んでおくこともできると思います。

  8. nono より:

    こんにちわ、nonoです。
    一応落ち着きましたので、内容を報告させていただきます。

    まず、フィールドをグループにして、そのグループ単位で個数を増やしていく事に関しては、CCKの次バージョンCCK3では対応可能という情報がありましたが、現時点ではまだ開発バージョンなので見送りました。
    結局、Imagefield、ImageField Extendedを併用することで対応しました。

    この2つのモジュールを用いて、「画像×1、テキストフィールド×任意」といったフィールドが作れますので、当初の車の「グレード」を表現できそうです。

    ただ、問題点としてPDFファイルがアップロードできないという点がありましたが、Imagefieldのソースを少し触るだけで解決いたしました。
    ・Imagefiledの設定でアップロードファイルの種類に「pdf」を追加しました。
    ・アップロードファイルが「画像」であるとチェックしている箇所がありましたので、ソース上からコメントアウトしました。
    →imagefield.module:200ぐらい

    これで実際にPDFファイルをアップロードできるようになるのですが、画像をアップロードしたときはサムネイルが表示されるのに対し、PDFでは何も表示されずに見た目的に違和感があります。ですので、
    ・サムネイルを作成する際、PDFファイルだった場合は特定のサムネイルファイル(自作です)を表示する。
    →imagefield.module:theme_imagefield_admin_thumbnail()

    といった変更を加えて対応完了いたしました。

    この度は色々とご指導頂き誠にありがとうございました。
    今後も本サイトを参考にさせて頂きます。

  9. TAK より:

    解決されたようで何よりです。多少なりともお役に立てたとしたら嬉しいです。

    モジュール自体を変更されたようなので、アップデートの時には注意してくださいね。

    Drupal7α版がリリースされたので、ちょっとインスールしてみたのですが、imagefieldの機能がデフォルトになっています。フィールドのもたせ方がかなりフレキシブルになっているようです。今回悩まれたような事例が簡単に解決できそうです。

    まだまだバグフィクスの段階で、自分がトライした限りでは必要なサーバーのリソースもDrupal6と異なるようです。実運用に使えるものがリリースされるまで、しばらく掛かりそうですが、楽しみです。

  10. nono より:

    こんにちわ

    アップデートでは気を付けなければならないですね。
    EC-CUBEをカスタマイズしてた時に、バージョンアップに非常に手間が掛かりました。
    その点、Drupalはコア部分は触る必要ないかな、と思っていたのですが、やっぱりある程度は手を加えることのなってしまいました。
    もしかしたらもっとうまい方法があったのかもしれませんが、少しずつ勉強していきます。

    Drupal7では機能向上と共に使用感も大きく変更されるみたいですね。
    ついて行ける様に頑張ります(^^;
    もうちょっと日本語環境が整ってくると嬉しいのですが、英語も読めるように同時進行中です。。。

  11. shige より:

    はじめまして、教えてください
    ここのコメントのフィールドですがデフォルトは件名、名前、本文だけかと思います。
    mailおよびWebsiteはどのように追加するのですか?

  12. TAK より:

    shigeさん、こんにちは!

    コンテンツタイプ編集画面のコメントの設定の匿名ユーザーのコメントの設定で、連絡先の記入を任意あるいは必須に設定すると、ログインユーザー以外に対してメアドやウェブサイトのフィールドが有効になります。

    お試しください。

Leave a Reply

rss