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

このホームページの根幹、ギャラリーページを作りこんでみよう。
なんのギャラリーなのかを明示してそのレビューと画像を表示していく。
画像は実物大、或いはレスポンシブさせた画像を列挙するとページが無駄に冗長化してしまうので、
普段はサムネイル画像を表示させつつ、いずれかをクリックされたらライトボックスで表示するという動きにする。

モックアップの拡張子をPHPに変更して仕様を決定する。

・大見出し　h2として表記する箇所になるのでページタイトルをそのまま表記する。
・大見出し画像　後々一覧ページで表示させたいのでページ属性として設定する。
・ギャラリー画像　ブロックとして表現。SwipeBoxというLightboxのスクリプトを埋め込んでいる。
以前ならDesigner Contentsでブロックを作っていたのだが、5.7系では非対応であり、代替え案となるアドオンも有料。
よってブロックにカスタムテンプレートを組み込んで使う。

ちなみのそのアドオンは決して高くはないのだが、クレジットカードを持っていないので決済手段が無い。
よってネットの買い物は1円の買い物でも手が届かないくらいの高額商品なってしまうというのが僕の現状だ。

まずギャラリー画像部分だが、カスタムテンプレートを組み込めば当初予定しているレイアウトは実現できるのだが、
このままだと画像を一枚追加するたびにカスタムテンプレートを当てなければならない。
それはなんだか面倒だ。なので、画像を追加した場合には自動でテンプレートが適応されるようにした。

 $a = new Area('Main');
 $a->setCustomTemplate('image','templates/[取りたいテンプレートへのパス]');
 $a->display($c);

このようにすればカスタムテンプレートをデフォルトで読み込んでくれる。
編集画面上でクラスの設定などをすると適応されなくなるが、特にする必要もないので、今回は無視する。

で、完成させたのがこれなんだが…

長いタイトルを付けるとレイアウト崩れを起こさんばかりになってしまう！！

ってことで方法を考えてみる。
・タイトルに文字制限をオペレーションする
この方法は却下。タイトルタグには「製造メーカー、商品名、スケール、（場合によっては仕様名）」まで入れたいのでどうしても長くなる。
・h2にはタイトルタグと同じものを入れない
この案を採用。h2にはタイトルタグと同じものを入れろとか言われたことないし。

方法としてはまたしてもページ属性。

コンパネから「ページとテーマ」→「属性」でページ属性を新たに追加する。

するとページ内の設定でこんな風に追加が出来るようになったのでこれを出力できるようにすればいい。
ただ、毎回これを設定するのも面倒なので必要性を感じなければそのままタイトルを表示するようにしたい。
ってことでテンプレートに書くコードとしてはこんな感じだ。

$page_head_title = $page->getAttribute('page_head_title');
if($page_head_title){
　echo $page_head_title;
}else{
　echo ($page->getCollectionName());
}

getAttributeでページ属性を取得し、その入力があったらそれを表示、無ければタイトルを出力という形。

完成形はこのような形か。
お客さんに納品するサイトだったらデザイン・コーディング側で調整しなければならないが、
どうせ自分しか運用しないし、SEOなんかも視野に入れてないので良しとする。