Concrete5のメニューを画像に

Concrete5
http://concrete5-japan.org/
http://www.concrete5.org/

Concrete5すばらしいプロダクトだと思うのですが、プラグインが少なかったり日本語情報が少なかったりしてまだまだ使い辛い。

標準でautonavというメニュー生成のblock（機能）が提供されているのですが、メニューを画像に変更することがどうやらできない（のか？）。

メニューを固定で編集してしまうことは容易なのですが、せっかくのCMSなんで、もう少しスマートに解決したい。

ということで、autonavのカスタムテンプレートとして対応する方法をご紹介。

Image Navigation Items

詳しくはリンク先を参照して頂いて、以下、要点のみ。

1. ページ追加属性追加

「ページとテーマ」＞「ページタイプ」＞「ページ属性情報追加」
から「ファイル／画像」形式で通常状態のメニュー画像と当該画面表示中のメニュー画像を設定する属性を追加。

2. 画像設定

ページ編集画面の「ページ設定」＞「カスタム項目」から1.で設定した画像設定項目を追加して、ファイルを設定。

3. カスタムテンプレート追加

autonavのカスタムテンプレートを追加する。

/concrete/blocks/autonav/view.php
を
/blocks/autonav/templates/image_navigation.php
などとして、編集

$linkTextActive = $ni->getName();
$linkTextInactive = $ni->getName();
 
$picOn = $_c->getAttribute('pic_on');
$picOff = $_c->getAttribute('pic_off');
 
if ($picOn) {
  $linkTextActive = '<img src="' . $picOn->getURL() . '" alt="' . $linkTextActive . '"/>';
}
if ($picOff) {
  $linkTextInactive = '<img src="' . $picOff->getURL() . '" alt="' . $linkTextInactive . '"/>';
}
 
if ($c->getCollectionID() == $_c->getCollectionID()) { 
 echo('
<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" href="' . $pageLink . '">' . $linkTextActive . '</a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
echo('
<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '">' . $linkTextActive . '</a>');
} else {
echo('
<li><a href="' . $pageLink . '">' . $linkTextInactive . '</a>');
}

4. カスタムテンプレート適用

画像メニューを表示させたいautonavブロックをクリックして「カスタムテンプレート」適用