[第5回] G/Afをコンクリ5.7に改造する[Concrete5]

だいぶ間が空いたが前回の続きをやっていきたい。

前回はギャラリーページを作ったので、その一覧ページを作っていく。
なるべくページテンプレートを作りたくないのでDefault.php上にカスタムテンプレートを配置していく。

一覧ページというと結局のところはアーカイブページということになる。
現在のデザインはこんな感じである。↓

車なのでメーカー別に完成記事を置いていく感じにしていた。
右側に洒落た背景画像を設定していたが、今回はこれを省略。
ただ、ちょっと格好付けてサムネイル画像を表示させたいのでページリストブロックを作っていく。

コードを一部抜粋

<div class="col-sm-2">
<a href="<?php echo $url ?>" target="<?php echo $target ?>">       
<img src="<?php echo $thumbnail_image_src; ?>" class="img-responsive">
</a>
</div>
<div class="col-sm-10">
<a href="<?php echo $url ?>" target="<?php echo $target ?>">
<p class="page_list_title">
<?php if($page_head_title){echo $page_head_title;}else{echo $title;} ?>
</p>
</a>
<p class="page_list_description">
<?php if ($includeDate): ?>
投稿日:<?php echo $date?><br>
<?php endif; ?>
<?php echo $description ?>
</p>
</div>

何が何だかわからんすね。
自分のポリシーみたいなものも合わせて解説。

 /*サムネイル画像を取得*/
$thumbnail_image = $page->getAttribute('thumbnail_image');
if($thumbnail_image) {
　$thumbnail_image_src = $thumbnail_image->getRelativePath();
}

前回設定した画像タイプのページ属性を取得している。
本来concrete5にはthumbnailという属性を指定するよう指示があるのだが、
ページリストの編集時に「サムネイルを表示する」というチェックマークにチェックを入れてなくて
『この一覧にサムネイルが表示されてないんですけど!!!(怒)』というクライアントからの怒りの電話がかかってくることがある。
サムネイルの有無を選択させる必要があれば仕様をしっかり説明する必要があるのだが、
今回のように絶対的にサムネイルを表示させる必要があればテンプレート上にこのチェックの有無での分岐をなくしてしまいたい。
サムネイルがなければない時の分岐を作るかNoImageを表示させるようにテンプレートに書けば済む話である。

また、ユーザー指定のページ属性にしておけばHTMLタグをゼロから書ける。
デザインからコーディングまで全部自分がやっているのであれば良いのだが、
僕の場合コーダーからHTMLソースを受け取り、それをCMSのテンプレート上に落とし込む仕事のスタイルなので、
コーダーの癖のあるソース(例えばLi上にdivがあったりとか。)を再現しようと思ったらCMSが提供するライブラリのタグ生成では再現できないことがあるので、
画像パスだけ受け取れるこのページ属性にしておきたい。
というか<img>くらいライブラリなんか使わなくても自分で書くっつーの。

<?php if($page_head_title){echo $page_head_title;}else{echo $title;} ?>

前回代替えタイトルを表示するページ属性を書いたので、その分岐を書いておく。
で、完成したのがこれ。

うん。まあ、今数が4つだからそんな気にならないけど、これが20とかになったらページの長さがヤバイことになるよね。
ページングをつければ問題ないけど、ブログじゃないから過去に追加したものにもアクセスできるようにしたいよね。

ってことでサイトマップ構造を少し変更する。

↓変更後

車ならばメーカー別にカテゴリ化しているが、航空機は車と比べて桁違いにライフサイクルが長いので一社当たりがリリースする製品数は少ない。
模型になればより少なくなり、自分が製作するという括りになればさらに少なくなる。
よってメーカー別にしてしまうと、模型を作るたびにいちいちメーカーページを追加し、第一階層にページリストを追加する作業が多くなってしまうのでページリスト化して自動化する意味がなくなる。
なので国別にカテゴリ化していく。
そして、トップ階層では最新記事だけ置いて、第二階層の国別ページで全て表示させる形を取っていこうと思う。

で、完成したのがこのページ。

各国の最新3記事を表示させて、あとはそのアーカイブページへと更に誘導するというスタイルを取る。
トップ→航空機トップ→国別アーカイブ→記事

と、記事にたどり着くまでの階層がかなり深くなってしまったが、
新規ユーザーは最新記事だけが見れれば良いだろうから第二階層から直接記事に飛ばせるようにすればUI的には問題ない筈。