【後編】CSSもJSも不要！DrupalのViewsで作るイメージギャラリーの作成方法

こんにちは。山中です。

今回は以前こちらに書かせていただいた「 Drupal の Views を使ったイメージギャラリーの作成チュートリアル」の後半をお届けしたいと思います。

今回の作業を進める上での前提となる環境やモジュールについては前編に記述しております。 前編をまだご覧になっていない場合はまずはそちらからご覧ください。

• 【前編】CSSもJSも不要！DrupalのViewsで作るイメージギャラリーの作成方法

イメージギャラリーの作成 後編

この記事ではイメージギャラリー作成に必要な 4 つのステップのうち 3 と 4 の部分についてご説明します。

1. イメージギャラリー用のコンテンツタイプを作成
2. イメージギャラリーのコンテンツを作成
3. 画像スタイルを作成
4. 新しいViewsページを作成

ここでいう「画像スタイル」というものが何なのかといった説明は今回は割愛させていただきますが、そちらについてはまた別の記事でご説明していますのでよろしければご覧ください。

• Drupal の画像スタイル機能の使い方
• Drupal で画像にさまざまな効果を付加する「画像スタイル」のエフェクト

画像スタイルを作成

このステップではイメージギャラリーの一覧に表示される「サムネイル」画像のための画像スタイルを作成します。 Drupal がデフォルトで用意している Thumbnail (100x100) を使ってもよいのですが、このスタイルを使うと画像が無理やり 100x100 内のサイズに押し込められてしまい見栄えがイマイチとなってしまいます。 今回は見栄えを重視しサムネイル用の画像スタイルを新たに作成することにします。

以下のページにアクセスします。

管理 » 環境設定 » メディア
(パス: admin/config/media/image-styles)

「 スタイルの追加 」をクリックします。

画像スタイルの名前を入力する画面が出てくるので、画像スタイルの 名前 と システム内部名称 を入力し、「 新しいスタイルを作成 」をクリックします。

つづいて画像スタイルのプレビュー・編集画面に移ったら効果(エフェクト)の項目を追加します。 今回は元画像がどのようなサイズの場合でも固定サイズの画像を作成することにしましょう。 拡縮とトリミング を選択し、「 追加 」をクリックします。

今回は画像のサイズは正方形で固定します。このあたりはお好みのサイズで作成しても良いでしょう。

この記事では Drupal コアの bartik テーマを使用する想定で、メインコンテンツに画像が横に 4 つきれいに並ぶように、サイズは 幅 150px 高さ 150px と設定しました。

画像スタイルはあとで変更することもできますのでひとまず適当に設定して Views で作成したページを実際に見て後で微調整するというかたちも良いかと思います。

入力が完了したら「 エフェクトの追加 」をクリックします。

「 画像エフェクトは正常に適用されました 」とメッセージが表示されたら完了です。

この記事では拡縮とトリミングのエフェクトのみ追加しましたが、お好みで他のエフェクトを加えるとよいでしょう。

画像スタイルの作成は以上です。次はいよいよViewsの設定を行います。

新しいViewsページを作成

以上で作成した画像スタイルを使ってイメージギャラリーを生成するViewsを作成します。

以下のページにアクセスします。

管理 » サイト構築 » ビュー
(パス: admin/structure/views)
※ 古い翻訳の場合、「ビュー」は「表示」と表示されている場合もあります。

「 ビューを追加 」をクリックします。

ここからViewsページ作成のための基本設定を行います。 イメージギャラリーの場合以下の項目の設定が必須となります。

• 名前
• システム内部名称
• 表示 [ コンテンツ ] of type [ Image gallery ]
• ページを作成する
  • パス

キャプチャでは以下のように設定しています。

• ビューの名前: ギャラリー
• システム内部名称: gallery
• 表示 [ コンテンツ ] of type [ Image gallery ] 並び順 [ 新しい順 ]
• ページを作成する: チェックオン
  • ページのタイトル: ギャラリー
  • パス: [ gallery ]
  • 表示形式: [ グリッド ] の [ フィールド ]
  • 表示件数: 20
  • ページャーを使用する: チェックオン

ページのタイトル、パス、表示件数はお好みで自由に設定するとよいでしょう。

基本設定が完了したら「 Continue & edit 」をクリックします。

ビューの設定画面が開いたらビューのフィールドにギャラリー用の画像フィールドを追加します。

フィールド横の「 追加 」をクリックします。

コンテンツタイプを作成したときにつけた名前(この記事の場合は「ギャラリー画像」)で検索フィールドに入力するか、 フィルター で コンテンツ を選択することで表示されている項目をある程度絞りこむことができます。 キャプチャでは フィルター で コンテンツ を選択して絞り込んでいます。

ギャラリー用に作成した画像フィールドを探してチェックを入れ「 Apply(all displays) 」をクリックします。

フィールドの設定画面が表示されたら、フォーマッターを Colorbox に変更します。 するとColorboxを使って表示する際の設定項目が自動的に表示されますので、以下の項目を設定してください。

• フォーマッター: Colorbox
• Content image style: 先ほどのセクションで作成した画像スタイルに変更
• Gallery (image grouping): Per page gallery

ちなみに設定項目を簡単に説明しますと以下のようになります。

• Content image style: ギャラリー一覧ページのサムネイルとなる部分の画像スタイルの設定
• Colorbox image style: クリックして大きく出てくる部分の画像スタイルの設定
• Gallery (image grouping): colorbox のグループ設定
  • Per post gallery: 投稿(ノード)ごとにグループ分け
  • Per page gallery: ギャラリーの1ページページごとにグループ分け
  • Per field in post gallery: 投稿(ノード)ごと、かつフィールドごとにグループ分け
  • Per field in page gallery: ギャラリーの1ページページごと、かつフィールドごとにグループ分け
  • カスタム: 自分の好きな文字列でグループ化できます。トークンは使えません。
  • No gallery: グループ化なし

その他必要であれば変更・設定し、「 Apply (all displays) 」をクリックします。

デフォルトで用意されていたタイトルは不要なので削除しましょう。

フィールドセクションの コンテンツ: タイトル(タイトル) をクリックし、表示されたタイトルフィールドの設定画面の「 削除 」をクリックしてタイトルフィールドを削除します。

以下のキャプチャ図のようにフィールドが コンテンツ: ギャラリー画像 だけになったら右上の「 保存 」をクリックします。

ビュー ギャラリー を保存しました。 とメッセージが出れば制作ステップが完了です。

早速作成したギャラリーを確認してみましょう！

Views で作成したギャラリーページを確認する

私の環境では以下のようになりました。 一覧のサムネイル画像をクリックすると Colorbox モジュールによって大きく表示されるかと思います。

いかがだったでしょうか。 今回は2つの記事に渡ってDrupalのViewsとColorboxで作成するイメージギャラリーの作成方法をご紹介いたしました。

画像ばかりで思いのほか縦に長い記事となってしまいました。 ここまでお付き合いいただいたみなさま、ありがとうございました。

今回は CSS のコードは書きませんでしたが、テーマ内の CSS を編集すれば細かな部分を自分好みにカスタマイズすることも可能です。 ただし Drupal のコアテーマやコントリビュートテーマの編集は厳禁ですので、 CSS を書く場合はオリジナルのテーマを作成してその中でスタイル調整を行うようにしてくださいね。

スタイル調整を自分でゼロから行いたい場合はビューの基本設定の 表示形式(フォーマット) の部分を HTML list や フォーマットされていないリスト に変えていただくとスタイル調整しやすいかと思います。 ぜひお試しください。