2007-11-02

Drupal で画像を入れる方法 (Lightbox V2)

Drupal で画像入りのページを作成する方法のひとつを試してみよう.目標は,サムネール化された小さめの画像を文中に表示し,それをクリックすると大きいオリジナルが表示されるようにすることである.

今回はクリックすると大きくなるのを実現するために Lightbox V2 を使うことにする.

原始的な方法

  • オリジナルの画像(image01.jpg とする)を縮小したサムネール画像をローカルマシンで作成する(image01thumb.jpg とする).
  • ページの作成を開始する.
  • image01.jpg と image01thumb.jpg を File attachments セクションを使ってアップロードする.
  • input format で Full HTML を選択し,本文に以下のように記述する:
blah blah blah

<a href="/drupal/sandbox01/files/sandbox02/image01.jpg"
   rel="lightbox" title="Caption 01">
<img src="/drupal/sandbox01/files/sandbox02/image01thumb.jpg">
</a>

blah blah blah

imagecache + imagefilter を使う方法

  • Administer >> Site configuration >> Image cache に行く.
    • intext と入力し,Create preset をクリック.
    • Scale を選択し,Update preset をクリック.
    • Width に 300 を入れる.
  • Administer >> Content management >> Content types に行く.
    • Page を edit する.
    • 上のタブから Add field を選ぶ.
    • Name を intext image とし,Field type を Image にして Create field する.
    • 上のタブから Display fields を選ぶ.
    • intext image の Label, Teaser を <Hidden> にし,Full を Lightbox2: intext にする.
  • type が Page のノードの作成を開始する.
    • intext image セクションで image01.jpg をアップロードする.
    • body に本文を記述する.
  • (画像を複数入れたいときの方法は別の場所で.)

0 件のコメント:

コメントを投稿