記事へ画像の挿入

記事へ画像を挿入するには、「WYSIWYG Imagefield」を使用していました。

機能には十分満足していましたが、1点だけ問題がありましたが、それほど重要視はしていませんでした。
ところが、既存画像スタイルを編集した際には、致命的な問題となり得ます。
 

WYSIWYG Imagefieldの問題点

当サイトだけの問題かもしれませんが、記事を作成時に画像を挿入し保存、その後、その記事を再編集する際、本文だけ編集して保存すると、ImageFiledに登録されたデータが空になってしまいます。
この問題に対処するには、再編集時の保存前に「WYSIWYG Imagefield」ボタンをクリックして既存のImagefieldに登録されている情報を一旦表示してから、記事を保存するようにしていました。

Imagefieldが空になるとなぜ困るかというと、これまでに作成されたImagecacheをすべてFlush(消去&再作成)すると、FlushされたImagecacheは通常、自動で再作成されるはずですが、Server Internal Errorが発生して処理がすべて完了しないことが多々あります。この場合は、手動で再作成を行わなければリンク切れが発生することになります。
Drupal6であれば、Imagecacheの作成などのタスクがありましたが、Drupal7の場合はそれらがないため簡単ではありません。
以下は意図的に消去&再作成する方法です。

Druapl 7でImagecacheを消去する方法

  • 「drush image-flush」を実行
  • 各画像スタイルの編集画面の下部にある更新ボタンを使う
  • 「Imagecache flush」モジュールを使用する

 

Druapl7でImagecacheを再作成する方法

  • 画像をアップロードする(Imagefieldに新規登録)
  • Viewsを使って該当するImagefieldを表示する
  • 記事本文でImagefieldを表示する設定にする


多くの場合、記事本文内ではImagefieldの表示設定を非表示にしておき、加工してから表示していると思います。
そのため、一括でImagecacheを作成する現実的な方法はViewsを使う方法となります。

ここで、先ほどの「WYSIWYG Imagefield」の問題が致命的になります。
WYSIWYG Imagefieldの問題によってImagefieldが空になってしまっていると、ViewsですべてのImagefieldを表示するように設定しても空のため何も表示することができず、Imagecacheを作成することができません。
そのため、ImagecacheがFlushされてしまうと再作成が完了せずにリンク切れが発生し、それを容易には修復できません。

WYSIWYG Imagefieldは記事本文に多くの画像ファイルを挿入する事を簡単にするため使用していたわけですが、一旦、Imagefieldが空になってしまうと、その修復には再度、画像のアップロードから行わなければならず、2度手間になります。Imagefieldが空にならないように運用で対処していましたが、そこは所詮人間が行うことなので、注意していてもうっかりして~ということもあります。

実際にいくつかの記事でImagefieldが空になってしまいました。
最近の記事では、「RECBOXの初期化」と「Roboform2GOを購入」がImagefieldが空になってしまったものです。
どちらも、20枚前後の画像を挿入しており、これを修復する手間が惜しまれます。
RECBOXの初期化」と「Roboform2GOを購入」とでは、リンク切れが発生しているか否かの違いがありますが、これは、Imagefieldが空になったタイミングとImagecacheをFlushしたタイミングとで症状が異なっています。
現在はリンク切れが発生していない「RECBOXの初期化」は、Imagefieldが空になっている点は同じなので、次にImagecacheをflushするような操作をするとリンク切れが発生する状態にあります。
当サイトの場合、記事内で画像が使われているのにもかかわらず、フロントページなどティーザ表示時に画像が表示されなくなった記事が、Imagefieldが空になってしまった記事です。

今回、「WYSIWYG Imagefield」の問題が改善するのかを調査するために「WYSIWYG Fields」を導入してみました。
 

WYSIWYG Fields

D7では開発段階であるためD6がメインのように感じるプロジェクトです。
どんなものかは以下のビデオを参考にしてください。

 

必須モジュール

モジュール名 バージョン 備考
Content Construction Kit (CCK) 7.x-2.x-dev D7 coreに含まれていない機能のみ
Wysiwyg 7.x-2.2 エディタプロファイルの設定には使用するエディタのAPIが必要
jQuery UI - D7 coreに含まれているのはJQuery UI 1.8.7

 

推奨モジュール

モジュール名 バージョン 備考
Custom Formatters 7.x-2.2 フィールドを挿入する際のカスタムフォーマットを作成できるモジュール
http://customformatters.com/にいくつかのサンプルあり
Formatters for Node Reference fields 7.x-1.x-dev Node Reference fields用のフォーマットを追加できるモジュール
jQuery Update 7.x-2.3 D7版はJQuery UIを含み、JQuery 1.5.2/1.7.1/1.8.2、jQuery UI 1.8.11に置き換えられる
Node Relationships - D7版は存在しない

 

WYSIWYG Fieldsの設定

以下は、現在、WYSIWYG Imagefieldを利用していることを想定した設定手順です。
 

WYSIWYG ImagefieldからのMigration

WYSIWYG Imagefieldを使用していたフィールドをWYSYWYG Fields用にマイグレーションするモジュールが同梱されています。
このマイグレーションモジュール「admin/structure/content_migrate」を利用して、該当フィールドを変換します。
変換後は、フィールド設定が微妙に変わってしまっている場合があるようですので、設定内容を確認して調整します。

これ以降は、該当するコンテンツタイプの画像フィールドを選択して、その画像フィールドの編集画面で操作します。
 

WYSIWYG Imagefieldの無効化

WYSIWYG Imagefieldモジュールの機能を無効化します。
WYSIWYG Imagefieldの無効化
 

Insertボタンの非表示

WYSIWYG FieldsにInsertボタンが用意されていますので、Insertモジュールのボタンは非表示に設定します。
※Insertモジュールは使用しないようですのでアンインストールしても問題ないと思います。
Insertボタンの非表示
 

WYSIWYG Fieldsの有効化

WYSIWYG Fieldsを有効にします。
WYSIWYG Fieldsの有効化
※設定画面では、エディタで使用するアイコンボタンの選択や使用するフォーマットを選択します。
 

フォーマットをカスタマイズ(Optional)

Custom Formattersモジュールの機能です。
以下はCustom Formattersモジュールの紹介ビデオです。


画像を挿入する際にどのようなフォーマットで挿入するのかを選択しますが、そのフォーマットを事前に作成しておけば、好みのフォーマットで挿入が可能になります。

以下は、「カスタム:Collage」の例です。
collageを追加
※このサンプルはhttp://customformatters.com/からダウンロードしました。
 

リスト

Custom Formattersのリスト
 

環境設定

Custom Formattersの環境設定
 

感想

WYSIWYG Fieldsモジュールを使用した感想は、WYSIWYG ImageFieldと比べて操作性には大差はありませんが、WYSIWYG ImageFieldの問題は改善されたように思います。
操作上で注意が必要な点は、挿入した画像を誤ってクリックしてしまうと記事本文(body)が挿入した画像だけが表示された状態になり、その他はすべて消えてしまいます。
もし、そうなった場合はあわてずに、エディタの「元に戻す」を1回押して、さらに「ソース」を2回押せばフォントやスタイル表示が元にもどります。
とくに問題となる点はありませんでしたので、今後はWYSIWYG Fieldsモジュールを利用する予定です。
 


2013.03.16追記
ImageFieldが別の理由で消去されてしまったようです。
その数は数百にも及ぶため、手作業で修復するのは無理そうです。
このままいくのか、バックアップをリストアして元に戻すのか
消去されたのは恐らく、マイグレート時だと推測しますが、そもそもフィールドの設定を1にしたり無限にしたりしたこと、Node Converterでコンテンツタイプを変更したこと、などが影響しているようにも思います。
そのため、リストアしても結局同じ結果になる可能性もあり、どうすればよいのかを決めかねています。
確実な方法は、現状のまま余裕があるときに手作業で修復していくことでしょうか・・・

Drupalバージョン

Drupal 7.x