baserCMS 「バナー管理」プラグインをカルーセルスライダーに利用すると、デザインや使い方(用途)の拡張性が一段と上がる!

そもそもbaserCMSには、メインイメージを出力するためのmainImage()関数というのがあって、管理画面上でも設定用のUIが予め用意されているなど、なかなかに至れり尽くせりです。
ただ、mainImage()関数で出力されるHTMLコードが、基本的にはリストスタイルで、便利ではあるのですが、その分融通が効きません。たとえば、好みのカルーセルスライダーでちょっと凝ったことをしたいと思ったら、せっかく用意してもらっているリストスタイルを変更せざるを得ないケースもあって、mainImage()関数のヘルパーファイルをテーマ上に持ち込んで改修したり、テーマヘルパー(独自ヘルパーとか)を別途用意するような格好になり、それはそれで一手間あったりします。(参考:「baserCMS 「Omotenashi-2」 テーマヘルパーを使ってみては?!という提案」記事)
そこで、いっそのことmainImage()関数と専用UIのソリューションをあきらめて、代わりに「バナー管理」プラグイン を利用してカルーセルスライダーをデザイン、運用をしてみてはどうかという提案です。実際、プラグインのPR文にも「バナーを表示するバナーエリアを複数設定できますので、トップページのスライドショー、サイドメニューのバナーエリアなど、複数の画像リンクエリアを同時に管理可能です。」と書かれていますし。
「バナー管理」プラグインをカルーセルスライダーに利用した場合のメリット
「バナー管理」プラグインは、文字通りバナーの出力管理用に作られたプラグインですが、リリース当初からバナーをレイアウトするHTMLコードを自由に出力できる様に、事前に設計したテンプレートファイルを読み込ませることができる柔軟な仕様になっていました。先だってリリースされた「バナー管理」プラグインv.4.1.5では、長らく放置されていたadmin-third用のUI適応がされたことで格段に扱いやすくなり、併せてpictureタグを利用したメディアクエリ機能が追加搭載されたことで、使い方(用途)としてのスケーラビリティーも一段とあがりました。
そんな「バナー管理」プラグインをカルーセルスライダーに利用した場合のメリットをあげてみます。
- 公開非公開、公開期間の設定などによって、スライダー画像の差し替えが、より柔軟に、容易に行える。
- スライダー画像の表示順を簡単に入れ替えることができる。
- 「altテキスト」欄や「説明」欄をうまく利用してタイトルや文字情報(製品やプロジェクトの概要説明やHTMLタグを利用した製品ロゴ画像など)をスライダー画像に重ねて表示させるなどの応用がしやすい。
- 「バナー管理」プラグインv.4.1.5で追加されたpictureタグを利用したメディアクエリ機能によって、メディア毎(表示画面幅に応じた条件)の画像の差し替えが可能。
baserCMSコアのメインイメージ出力機能の代わりにというより、テンプレートファイルを利用して自由にHTML出力の設計ができるため、cssアニメーションなどを組み合わせてもっと柔軟な出力設定も可能だと思います。
とはいえ、そのHTMLコード出力用テンプレートファイルの作成は、それはそれで少し手間がかかるので、次回はその辺りを、なかなか素敵な国産の軽量・高機能スライダー「Splide」 をサンプルに具体的な例を提示しながらお話ししてみようかと思っています。
実際、「バナー管理」プラグインをカルーセルスライダーに利用するための肝は、このテンプレートファイルの作成ですので、話がなるべくあちこちにいかないように、先に「バナー管理」プラグインv.4.1.5で追加された pictureタグを利用したメディアクエリ機能の設定について、以下簡単にまとめてみました。
プラグインのどこにも説明がなかったので。。。(探せないだけで、あったらごめんなさい)