Drupalの画像処理を見直す

ImageField+ImageCache

今やDrupalの画像処理の定番にもなったと思われるImageField、画像をフィールド値として持てるので、Viewsを使って他のページから呼び出し、ImageCacheと組み合わせて、リサイズしたり、トリミングしたり、画像の一覧やスライドショーが簡単にできるようになります。

IMCE

ところが画像に説明文を組み込むとなると、結局ImageFieldとは別に、IMCEを使って本文に画像を組み入れたりすることになります。Wysiwyg IMCE bridgeを使って本文欄のボタンから画像を組み込むことができるようになるものの、IMCEは画像を本文に組み込むまでかなりのステップの操作が必要になり、またある程度HTMLの知識があるユーザーでないと操作は容易ではないと思われます。

Insert

最近になってImageFieldを本文に組み込めるInsertというモジュールがリリースされました。これでフィールド値の画像を本文に挿入することが可能になったのですが、編集画面を何度も上下にスクロールしたりすることになり面倒で、ブログサービスを使っているユーザーあたりからクレームが来そうです。

Wysiwyg ImageField

そしてついに先頃Wysiwyg ImageFieldというモジュールが登場しました。本文欄のボタンからJQueryを使ってInsert設定したImageFieldの画像を本文欄に組み込むものです。うわっ、これは決定打かと思われたのですが、複数サイトにインストールし試してみたものの、なぜかこのフィールドをWysiwyg ImageFieldとして使うという設定が知らぬ間に外れてしまったり、JQueryのアップロード画面の表示位置が画面の予想外の場所に行ってしまったりと、イマイチ安定していませんでした。（このサイトではうまく行っており、この設定を使っています）

今後改善されると思われ、またこの辺の機能を統合したものがDrupal7の画像処理になるのではと推測しているのですが、では今どうするかということになります。

ImageCacheのオーバライド

ImageFieldでは代替テキストとターゲット属性の設定フィールドの他、説明フィールドという画像の属性入力のフィールドが追加できるようになっています。この属性フィールドの内容はLightboxを入れると拡大した時に表示されます。

さらにHow to print description under the image fieldというのを見つけこの#30の回答を参考に、画像と並んで説明フィールドの値を表示できるようにtemplate.phpでImageCacheのフック関数をオーバライドするようにしました。

これに追記というテキストフィールドを作り、これで本文、画像、説明文、画像、説明文、画像、説明文、追記、という感じで、本文に画像を組み込まなくても、だいたいどんなコンテンツでも対応できるようになりました。

この方法を半年くらい使っていたのですが、node上の画像では説明フィールドが代替テキスト（ALT）にもなっているものの、Viewsで呼び出した場合は、ALTは空っぽ、逆にALTを入力すると、Viewsで画像を呼びだすとALTのテキストが併記されてしまうことに気付きました。

SEO考えたらViewsだけこの併記されたテキストをdisplay:noneなんてできません。代替テキストフィールド、タイトルフィールド、説明フィールドの値がどこでどう置き換えられているのか、かなり頭が混乱してきました。

で、どうやらこの画像そのものであるImageCacheにテキスト出力を組み込むようにオーバーライドする方法に問題がありそうと気付きました。

ImageFieldのテンプレートをオーバーライド

調べて調べて、上記と似たページですが、Printing the Description (or Title) Below the Imageというドキュメンテーションページに行き着きました。ImageCacheではなくImageFieldのテンプレに説明フィールドやタイトルフィールドの値出力を追加しているだけです。

modules/cck/themeにあるcontent-field.tpl.phpをコピーし、さらに対象となる画像フィールド名を組み込んで、テキスト出力部分を書き換えたcontent-field-field_image.tpl.php（画像フィールド名がimageの場合）の二つのテンプレートを自分のテーマディレクトリにアップロードするのがポイントです。

出力するテキストは、$item['data']['title']を$item['data']['description']にすると説明フィールドになります。

このページの流れから推測すると、1年以上かけてまとめられたようで信頼感があります。

ImageField Extended Fieldsというモジュールを入れると、さらに属性テキストフィールドが追加でき、入力フィルタも効かせることもできます。

これで、本文、画像、説明、画像、説明、追記、という流れで容易にコンテンツ作成、Viewsでの出力も欲しい部分だけ、引っ張って来れるようになりました。

画像を好きな大きさにする、画像にリンクを組み込む、といった場合はInsertを使った別の画像フィールドを使ってもらうとして、Drupal7登場までは、一応これで完成かな、と思える設定だと感じています。