Drupal のコンテンツに画像を貼り付ける方法あれこれ

Last edited on 2011/09/28 (水) - 22:03
イメージキャッシュのサンプル画像

よく知られているように、Drupalはインストールした状態ではコンテンツに画像を挿入するのにも一苦労する。

画像を貼り付ける方法として、大体以下の方法を使っている。

  • 自分でHTMLを書く
  • image moduleを使う (Drupal 6 では imagecache module)
  • flickr moduleを使う

なんだかんだ言っても本文中に画像を入れて、細かいレイアウトをするためには、自分でHTMLを書くのが一番である。以下のページの例ではそうしている。

NapsterのDRM付きWMAはSongbirdでも再生できた

こんな具合のコードを手で書いている。picboxというクラスは自分で設定したもので、右寄せするようになっている。

<div class="picbox">
<img src="/files/xxxxxx.jpg"/>
</div>

記事の右上に数枚の画像を入れるのには、image モジュールを使う(Drupal 7の場合)。imageモジュールを使うとノードに画像フィールドを追加することができる。フィールド数を固定しなければ複数の画像を挿入できる。imageモジュールで特筆すべきは表示の仕方に応じて画像の大きさを変えたり、いろいろな効果を加えたりできることである。例えば、ティーザ表示とフル表示とRSSフィード内の表示とでそれぞれ画像の大きさをかえることができる。

Drupal 6の場合は、imagefieldモジュールを使って本文の上部か下部の定位置に一枚だけ画像を入れることができる。このモジュールはCCKのフィールドとして画像を扱うことができる。imagecache モジュールと組み合わせて使われることが多い。このimagecacheモジュールの機能を使うとティーザー表示とフル表示とで画像の大きさを変えることができる。Drupal7ではimagefieldモジュールとimagecacheモジュールの機能を併せて imageモジュールとして Coreに取り込まれた。

以下のページの例では、右上のスケートセンターの画像にimageモジュールを使っている。フル表示のときはColorboxモジュールを使ったlightbox 表示をするように設定してある。ティーザー表示の時はこの画像が小さく表示される。

http://travel.nyanchew.com/nyboston

以上は、まず自分で画像をアップロードすることが前提だが、もうめんどくさいのでFlickrへのリンクでいいやというときもある。そこで、Flickrモジュールを使う。Flickrモジュールの入力フィルターとしての機能を使えば本文中の好きな位置にFlickrの写真をレイアウトできるので便利である。以下のページのように picbox クラスと組み合わせて使っている。

http://travel.nyanchew.com/turkey

実際に書いているコードはこんな感じだ。

<div class="picbox">
[flickr-photo:id=154117543,size=m]
</div>

以下のページは、Flickrの写真へのリンクをフィールドとして使っている例である。Flickrの画像をフィールドとして使うにはFlickrfield モジュールを使う。

http://travel.nyanchew.com/airport-announce

Flickrfield もティーザー表示とフル表示とで画像の大きさを変えることができる。