DrupalのViewsでたった10分で画像スライドショーを作成する方法

2014.07.07

Studio Umi

こんにちは。
今年の滋賀県は梅雨らしい雨があまり降っていないので稲の成長に不安を覚えています。
出勤時に自分の家の田んぼの横を通り過ぎると、苗は青々と順調に育っているように見えるのですがやっぱり不安です。みずかがみ(滋賀県で推進しているお米です。近江米！)ちゃんと育ってくれるといいなあ・・・

さて、今回の記事ではViewsでスライドショーを作っていきます。
スタイルシートでの調整を除けば管理画面だけでできるのでjavascriptにはノータッチで作れます。
ということは覚えちゃえば誰でも簡単に作れちゃうってことです！

まずは必要なものから紹介していきますね。英語が読める方はこちらのチュートリアルをどうぞー！

必須条件

この記事では以下のモジュールがインストールされ、ライブラリが導入済みであることを前提としています。

モジュール

Chaos tool suite (ctools)
Views (views)
- Views UI (views_ui)
Views Slideshow (views_slideshow)
- Views Slideshow: Cycle (views_slideshow_cycle)
Libraries API (libraries)

ライブラリ

jquery.cycle 直接ダウンロードはこちらから。
ダウンロードしたファイルの名前がjquery.cycle.all.jsならjquery.cycle.all.min.jsに変更しておきます。

ライブラリの入れ方

librariesフォルダがなければsites/allの中に作ります。
librariesフォルダの中にjquery.cycleフォルダを作ります。
jquery.cycle.all.min.jsをjquery.cycleフォルダに入れます。

↓jsのライブラリファイルまでのパスはこうなるはずっ。

sites/all/libraries/jquery.cycle/jquery.cycle.all.min.js

画像スライドショーを作成していく

さて！作っていきましょー！
ちなみに今回表示させる箇所はbartikテーマの「主な」リージョン(翻訳前の英語だと「Featured」)に配置します。

スライドショーの画像の幅をリージョンに合わせたいのでついでにここで幅を測っておきます。こんな時のChromeさんのインスペクターは超優秀ですね！幅は960pxでした。

専用のコンテンツタイプを作成する

この記事あたりを参考に作ってください。

作成したコンテンツタイプに画像フィールドを追加する

普通に設定して保存します。最大幅などは画像スタイルで指定したものを使いますのでここでは指定しません。
こちらも大体はこの記事にかかれていますので参考にしてください。

スライド用のノードコンテンツを作成する

記事やページを作成するのと同じようにコンテンツを追加します。Drupalの仕様上タイトルは絶対書かないといけないので（タイトルを無効にするモジュールもありますが・・・）、適当なタイトルの入力とスライド用画像の添付をしておきます。
画像は1ノードにつき1枚にしてください。

画像スタイルを設定する

「拡縮とトリミング」のエフェクトでさっき測った幅960x適当な高さ300を指定しておきます。画像スタイルについてはまた今度記事にさせていただきますね。

Viewsでビューを作成する（スライドショーブロックを作成する）

ビューの名前やらシステム内部名称などを入力し、ページを作成するのチェックをはずします。
代わりにCreate a blockにチェックを入れ、タイトルを好きにつけて表示形式をslideshowのフィールドにします。
ページ毎の表示件数は0にしておくとコンテンツタイプがslideshowのコンテンツが全部表示されます。ので、0に設定しておきます。
各項目が設定できたらContinue & editをクリックして次へ進みます！