concrete5 オートナビブロックで画像を表示する方法

concrete5 オートナビブロックで画像を表示する方法

久しぶりにグローバルナビに画像を利用する案件中にハマったのでメモ。

作業手順としては、

  1. ナビの画像を指定するページ属性を追加する
  2. 各ページの「設定」でカスタム属性の設定をする
  3. オートナビブロックのカスタムテンプレートを作成する
  4. オートナビブロックにカスタムテンプレートを適用する

という流れになります。

※こちらの記事はconcrete5 5.7系のキャプチャを使ってます。5.6と基本的な流れ、コードは同じです。

 

1.ナビの画像を指定するページ属性を追加する

 

ナビの画像は、通常時の画像と、マウスオーバーした時の画像の2つを設定したいと思いますので、ページ属性も2つ作成します。

ページ属性の設定は[管理画面]-[ページとテーマ]-[属性]から設定します。

始めから用意されている属性がずらーっと並んでますね。一番下まで行くと新しい属性を追加する箇所があります。(一番上にあるとか、なんか場所変えればいいのに。)

属性を追加

属性のフォーマットを選択します。今回は「画像/ファイル」にします。

実行ボタンを押すと、属性の設定画面になりますので、ハンドルと名前を決めます。

ここで決める「ハンドル」は、この後の【3】の手順で、php文で画像を呼び出すときに使う変数になります。半角英数字にしてください。

「名前」は管理画面に表示される名称なので分かりやすい名前を付けておきます。

nav属性

今回は

ハンドル : globalnav_image

名前   : ナビ画像

にしました。

セットは、ずらーっと並んでいる属性を管理しやすくするためのものです。今回はナビ用の属性なので「ナビとインデックス」にしておきます。

設定したら「新規」ボタンを押すと登録されます。属性一覧の「ナビとインデックス」に追加されているはずです。

同様にマウスオーバーしたとき用の属性も設定しておきましょう。

 

ハンドル : globalnav_image_ov

名前   : ナビ画像(hover)

 

2.各ページの「設定」でカスタム属性の設定をする

ナビの画像を各ページごとに設定していきます。

[フルサイトマップ]を開き、設定するページの[属性]を開きます。

hurusaitmap_zokusei

 

フルサイトマップ-属性左側に属性の一覧があり、右側で値の設定をします。
左側の一覧に先ほど作った「ナビ画像」と「ナビ画像(hover)」がありますので、クリックします。
すると右側に設定の表示が現れます。

ここで、それぞれの画像ファイルを選択してください。

設定したら「変更を保存」を押します。これを各ページ繰り返します。

3.オートナビブロックのカスタムテンプレートを作成する

カスタムテンプレートを作ります。画像を表示させるようにするためですね。

オートナビブロックの元々のファイルは「\concrete\blocks\autonav\」にあります。

この中の「view.php」をコピーして、

「\application\blocks\autonav\templates\」にペーストします。

コピペする場所を間違えないように注意です。

そしてファイル名を分かりやすい名前に変えます。今回は「global_nav.php」にしました。

view.phpという名前のままだと、すべてのオートナビブロックにこのカスタムテンプレートが適用されてしまうので気をつけましょう。

 

で、コードを変更します。

ポイントは3つ。

①ナビの画像を取得するには、先ほど設定した属性の値を読みだす必要があります。

その読み出し方が119,120行目です。

ハンドル名は【1】の手順で設定したものと同じ値にします。1文字でも間違っているとエラーになります。

私はこのhoverのハンドル名を「globalnav_image_ov」と「globalnav_image_over」で間違っていることに気付かずハマりました・・・。

②もう一つは、ナビの画像が設定されているかどうか判断する必要があります。

123行目。

これを判定していないと、画像が設定されていないページがあるとエラーが起きます。これもハマりました。。

③最後に、imgタグをセットするのを忘れないようにします。

128行目

元のコードはaタグの間が「$ni->name」となっていて、ページの名前を表示するようになっていますので、ここを「$img」に置き換えます。

 

これでコードの変更は完了です。

 

4.オートナビブロックにカスタムテンプレートを適用

 

編集画面でカスタムテンプレートを適用します。

nav

グローバルナビに該当するオートナビブロックをクリックして「デザイン&カスタムテンプレート」を選択します。

カスタムテンプレート

歯車マークを押すと設定メニューが出てきますので、カスタムテンプレートで「Global Nav」を選択します。

 

ここで、勢いあまって、直下の赤いボタンを押さないように。「スタイルをクリア」します。・・・ホントよく押します。なんでここにあるんだこのボタンは!!

落ち着いて水色の「保存」ボタンを押してくださいね。

nav画像

すると、ナビの画像を設定しているところには画像が表示されるようになりました!!

もちろん、画像を横並びにするならCSSの設定なども必要になってきますね。

(画像も設定していないし、CSSも適用してないし。。ごめんなさい。)

 

詳しくは、concrete5公式活用ガイドブックにも記載があります。concrete5 公式活用ガイドブック (Web Designing BOOKS)

ここは5.6も5.7も仕様が変わってないのでそのまま使えます!