Drupal でのフォトギャラリー、フォトアルバム
フォトアルバムとフォトギャラリーは、個人ブログであれ企業サイトであれ、どんなサイトも引き立てます。美しい画像こそが、Facebook や VK などのソーシャルネットワークで人々を引きつけるものです。それでは、私たちの Drupal サイトにフォトギャラリーを追加しましょう。
Colorbox エフェクトを使ってシンプルなギャラリーを作ることを提案します。Colorbox は jQuery プラグインで、thickbox や lightbox の代わりに使うほうが良いでしょう。Colorbox は、画像を画面に合わせて自動的にリサイズしてくれる点が便利です。今日ではさまざまな画面サイズや解像度があることを考えると、これは非常に役立ちます。
始めましょう。ここでは Drupal 7 でフォトギャラリーを作る方法を紹介しますが、Drupal 6 でも同様です。
次のモジュールが必要になります:
- Colorbox – http://drupal.org/project/colorbox
- Libraries API – http://drupal.org/project/libraries
- Views – http://drupal.org/project/views
- Fields API（Drupal 7 ではコアに含まれます。Drupal 6 では CCK モジュールです）
- Imagecache – http://drupal.org/project/imagecache
- File（Drupal 7 コアに含まれます。Drupal 6 では Filefield を使います）
- Image（Drupal 7 コアに含まれます。Drupal 6 では Imagefield を使います）
Drupal 6 の場合は、jQuery をバージョン 1.3.2 に更新するために jQuery update モジュールも必要になります。
これらのモジュールをダウンロードしてインストールします。
次に、実際の Colorbox ライブラリを次の場所からダウンロードします:
http://colorpowered.com/colorbox/
Colorbox のアーカイブを解凍し、sites/all/libraries フォルダーに配置します。libraries フォルダーが存在しない場合は、作成してその中に Colorbox フォルダーをコピーします。
libraries フォルダーの中に Colorbox があります:
私が Colorbox をすべてのサンプルとともにコピーしたことにお気づきかもしれません。これは、Colorbox がどのように動作するかをいつでも確認できるようにするためです。
すべてが正しく行われていれば、ステータスレポートに成功が示されるはずです:
素晴らしい、すべてが設定され、モジュールが有効になりました。準備は完了です――ギャラリーを作りましょう。
フォトアルバム用のコンテンツタイプを作成する
次の場所へ移動します:
/admin/structure/types/add
新しいコンテンツタイプのフィールドに入力します。
フィールドを管理する
次の場所へ移動します:
/admin/structure/types
画像を保存するためのデータ型を持つ「Photos」という新しいフィールドを追加します。
フィールド設定で、アップロード数を無制限にします（あるいはアルバムあたり 10 枚などに制限します）。
フィールドを保存します。アルバムのコンテンツタイプができました。誰がアルバムを作成できるかの権限は、次の場所で設定できます:
/admin/people/permissions
フォトアルバムのノードを作成する
次の場所へ移動します:
/node/add
アルバムのタイトル、説明を入力し、写真をアップロードします:
ノードを保存します。
ImageCache でギャラリーをスタイリングする
現状では、画像は元のサイズで表示されます。スタイリッシュなギャラリーにするには、ImageCache モジュールを使って、ノードに添付された画像を切り抜いたり、リサイズしたり、色調を付けたりします。
Image styles の設定ページは次の場所にあります:
admin/config
画像を 150×150 ピクセルに切り抜くための新しい画像スタイル（例:crop150x150）を作成します。
幅と高さを 150×150 に設定します。エフェクトを保存します。これで、あなたのプリセットがコンテンツタイプの表示設定ページで利用できるようになります。
表示フォーマットを Colorbox に設定する
次の場所へ移動します:
/admin/structure/types
アルバムのコンテンツタイプの「Manage display」を選択します。
写真フィールドを Colorbox として表示するように設定します:
引き続き Colorbox の表示設定を構成します:
「Node image style」で、私たちのカスタムプリセット crop150x150 を選択します。
設定を保存します。
仕上げ――CSS スタイリング
これで写真は Colorbox エフェクト付きの 150×150 のギャラリーとして表示されます。レイアウトをスタイリングするには、次の CSS を追加します:
.field-name-field-photos .field-item {
float: left;
margin-bottom: 15px;
margin-right: 15px;
}テーマによっては、CSS クラスやマージンを調整する必要があるかもしれません。そして、これが最終結果です:ノードベースのギャラリーとしてのフォトアルバムです。
