イメージスライダーを改変した画像ナビを作る

      2017/06/23

※現在公式のマーケットプレイスにacliss19xxさんが作成されたManual Navが配布されているので、画像でナビゲーションメニューを作りたい方はManual Navをご利用いただくことをお勧めいたします。

ということでここはこういうブロックの作り方があるんだぜ、くらいの紹介になります。

imagenav1

イメージスライダーブロック(画像スライダーブロック)というのはとても便利で、
自由にエントリーを追加できたり、
カスタムテンプレートを使えば結構幅広くギャラリー系のオリジナルブロック(風なもの)ができたりととても便利なのですが、
そのイメージスライダーブロックを改変してバナー画像ナビブロックなるものを勉強を兼ねて作ってみようという魂胆。

ブロックのイメージ

imagenav2

うえのサンプルはここのブログのサイドバーにあるただのアフィリエイトバナーなんですけど、
・ファイルマネージャーからバナー画像を選択できる
・タイトル(alt)が入力できる
・リンクがはれる
・そのリンクバナーが「エントリーを追加」をクリックすることでひとつのブロックのなかにいっぱいつくれる
というようなもの。

ダウンロードする

実際のブロックは下記ページに置いてあります。

https://github.com/01kawa/Image-Nav
imagenav3

右のサイドバーの下の方にある、「Download ZIP」をクリックする。

ブロックをアップロードする

imagenav4

展開してでてきたblocksフォルダ内のimage_navフォルダをごっそりコピー。
application\blocksフォルダ内にペースト。

imagenav5

上記の場合だと、
http://localhost/c5demo-1/application/blocks/image_nav ということになります。

ブロックをインストールする

imagenav6

「スタックとブロック」内の「ブロックタイプ」をクリック。
インストール待ちになっているので、「インストール」をクリックする。

imagenav7

インストールされた

ブロックを使用する

imagenav8

「Image nav」ブロックを追加する

imagenav10

画像・タイトル・リンク先を選択して「新規」をクリック

実際の表示

imagenav11

こんな感じでリスト表示されます。

imagenav12

該当部分のソースをみてみるとこんな感じ。
あとはお好きなcssをあてるもよし、カスタムテンプレートを利用するもよし。

もうちょっと手を加えたい

今回はイメージスライダーブロックから必要以外の項目を削除する作業を行ってるんですけど次はもうちょっと手を加えたいな~と。
以下は覚書も兼ねて今後の課題
・パッケージ化
・マウスオーバー時の画像(ホバー画像)も選択できるようにする(うまくいかず一回断念した・・・)
・target要素用のチェック項目を1個追加。チェックが入ったら新規タブで表示、みたいなやつ。

 - concrete5