ユーザーインターフェースを便利に楽しくするDrupalモジュール

Views Slideshow

Viewsモジュールのアドオンとして、ImageFieldの画像をスライドショー表示してくれます。

まず基本設定のスタイルからSlideshowを選びます。この時、画像毎の表示時間やフェードインフェードアウトの速度を設定できます。

出力するフィールドは画像のコンテンツ（ImageFieldの画像）を選択、この時、フォーマットでImageCacheの画像サイズや画像にリンクの有無なども選択できます。画像だけでなく、タイトルなども出力でき、画像と同時に切り替わります。

フィルターで対象となるノードを選択します。複数画像の入ったノードひとつを作って、スライドショー専用のノードを作ってもいいし、対象となるコンテンツタイプやタクソノミーを絞り込んで、それをまとめるようなスライドショーを作ることも簡単です。ノードへのリンクも組み込めるので、見せるだけではない、インタラクティブなユーザーインターフェースにもなります。

データベースに連動するフラッシュを作ろうとすると、かなり大変ですが、フラッシュなしで、殆どフラッシュと変わらないインパクトをもつビジュアルとインターフェースを超カンタンに実現できることになります。

Imagecache Actions

ImageCacheのアドオンモジュールです。さまざなな処理をしてくれるモジュールがセットになっているのですが、自分として欠かせなくなっているのが、Imagecache Canvas Actionsです。

ImageFieldでアップロードした画像をImage Cacheでリサイズ（Scale）やトリミング（Crop）するだけだと、複数の画像をFloatで出力する時、出力する画像の縦横比が異なると、きれいに整列してくれなくなります。

そこまず、Image Cacheで出力するサイズに合わせた白い正方形の画像、例えばタテヨコ200pxを先にアップロードしておきます。アップロードはFTPでも別途ノードを作ってそこからアップロードしても構いません。要はパスを特定できればOKです。

次にImage Cacheのプリセットを作成します。まずScaleで縦横それぞれ200pxにしておきます。そしてImagecache Canvas Actionsで、x軸、y軸のオフセットをそれぞれcenterにして、キャンバスとなるファイル名を先にアップロードしておいた白い正方形の画像のパスにします。final dementionsをbackgroudにして、プリセットを保存します。

Viewsやノードで画像の出力にこのプリセットを選択すると、画像は全てタテヨコ200pxの正方形の画像の中に、元画像の縦横比はそのままに縮小され、Floatさせてもきれいに整列してくれることになります。