【concrete5】List Files From Setを使って画像ギャラリーを作る

2015.07.06 WEB/デザイン ,


どうも私です。

最近ようやくconcrete5案件に出くわしまして、お勉強の日々です。

中でも「ファイルマネージャ」および「セット」が便利すぎワロタ的な感じなのですが、これでどうにか「ファイルをアップしただけで更新される画像ギャラリー」を作れないかしらと思った次第です。

(Sortable Fancybox Galleryというギャラリー用のアドオンもありますが、今回は要件に合わず・・・)

そこで発見しました「List Files From Set」という無料アドオン、こいつを何とかかんとかして作ってみましたのでメモがてら記事にしたいと思います。

List Files From Setのダウンロード、インストール

その名の通り、ファイルマネージャのセットに含まれているファイルを一覧にしてくれるアドオンです。無料ですよ。

例えば今回だと「画像ギャラリー」というセットを作って該当のファイルをそこに入れておけば、そのセット内のファイルを一覧表示してくれます。
ただ吐き出されるHTMLがアレだったり、リンクがダウンロード用のURLだったり、画像ギャラリーにするにはちょいとアレなんですね。

ダウンロード・インストールは下記より。

concrete5 :: List Files From Set

テンプレートをカスタマイズ

ダウンロード&インストールが出来ましたらば、テンプレートをカスタマイズします。
ちなみにファイルは「packages>list_files_from_set>blocks」内の「view.php」が見た目をアレしている部分になります。
で、今回は上記ディレクトリ内の「templates」の中に新しく作りますですよ。

この辺の細かいことは「カスタムテンプレート」についてググったりとかしてみると良いと思います。

デフォルトの状態

先ほど触れたデフォルトの「view.php」ですが、HTMLとして吐き出される部分はこんな感じ。超シンプル。

これの「$url」が、デフォルトだとダウンロードURLになってしまいます。
例えばPDFの資料をダウンロードさせたり、という場合はこれで良いのですが、今回は画像なのでカスタマイズ。

ファイルのURLを取得

とりあえず画像を並べるだけならこれでオッケーではなかろうかと。

サムネイル表示

今回はギャラリーなので、サムネイルを並べて、クリックしたら拡大!みたいな感じにしようと思います。

Imageヘルパーで超簡単にサムネイルを取得できます。
(参考 : デザイナーさんも必見、concrete5のヘルパーの使い方まとめ | notnil creation weblog)

あとは適宜HTMLの調整、画像拡大用のjQueryなどなど用意してください。

ファイルが出来たら適当な名前を付けて、「templates」内にアップします。

ブロックの追加

あとは任意の場所にブロックを追加するだけです。

list-files-from-set

「Select File Set」の部分で表示したいファイルのセットを選択、その他表示するファイル数や順序なども指定できます。

保存したら「カスタムテンプレート」で先に作ったテンプレートを選択します。
無事表示されれば完了です!

まとめ

いかがでしたでしょうか。

最初に書いた通りすでにギャラリー用のアドオンもありますが、微妙に違う…という場合はこんな感じのカスタマイズも良いかと思います。
カスタマイズ自体も難しくないですし、何より吐き出すHTMLをほぼほぼコントロールできるのがグッドです。

是非お試しあれ~

地方都市の片隅に生息する音楽好きウェブデザイナーです。
2,3ヶ月に1度のペースで部屋を改造したい欲望に駆られる持病を持っています。趣味はビールを飲みながら料理をすること。