画像をカッコよく表示する-Lightbox-MovableType編に続き、OpenPNE編です。
OpenPNEのバージョンは、v2.12.4 です。
入れ込む箇所は、日記、コミュニティのトピックとそのコメント、イベントとそのコメントの画像表示部分に入れ込みます。その他、メッセージやレビューにもありますが、使用頻度が少ないので、今回はパスします。
まず、LightBoxを一式、サーバにアップします。MovableType同様に /lightbox にアップするとします。
この場合、LightBoxのソースをMovableType編同様に修正する必要があります。
次に、OpenPNEのテンプレートを修正します。
LightBoxの組み込み
まず、全体的にLightBoxを読み込む部分を修正します。対象となるテンプレートは、
webapp/modules/pc/templates/common/layput.tpl
です。
この14行目以降（</head>の前）に
<script type="text/javascript" src="./lightbox/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="./lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="./lightbox/css/lightbox.css" type="text/css" media="screen" />
の３行を追加します。
LightBoxは本来
<script type="text/javascript" src="js/prototype.js"></script>
も必要なのですが、OpenPNEの場合、既に、prototype.js は読み込み済みなので、これは省略します。
また、head部に入れるということで、layout.tpl を修正するのではなく、管理画面の「【PC版】HTML挿入(HTML head内) 」から３行を追加しても良いと思ったのですが、IE6でエラーとなりました。
ここから追加出来れば、テンプレートを修正しなくてもいいので良かったんですが、エラーが発生しては使えません。。
<head> の直後に挿入されるので、挿入位置の問題かと思います（未検証です）。
日記への組み込み
次に日記の部分を修正します。日記は、
・日記の詳細：例えば、「マイフレンド最新日記」の表示されるリンクをクリック
・日記の一覧：自分のページの「日記」をクリック、他の人のページの「日記を読む」をクリック
・日記の編集：自分の日記から「編集」をクリック
の３箇所に画像が表示されます。それぞれ最大３つまで。
OpenPNEの標準だと、target="_blank" なので、別窓で表示されます。ですので、この部分を rel="lightbox～" に変更すればOKです。
■日記の詳細の対象となるテンプレートは、
webapp/modules/pc/templates/fh_daialy.tpl
で、この106行目から108行目が日記の画像（最大３つ）を表示する部分なので、ここの target="_blank" を
rel="lightbox[diary]"
と変更します。[diary]は３つをグルーピングして連続して表示可能とするためです。
日記には、コメントを付けることが出来て、そのコメントにも画像を付けることが出来ます。187行目から189行目がそのコメントの画像を表示する部分なので、ここも同様に変更したいところですが、同じように変更すると、そのページに表示される日記やコメントの画像が全部１つのグループになってしまいます。
出来れば、日記やコメント単位でグルーピングしたいので、日記やコメントのIDを使います。
187行目から189行目の部分は
rel="lightbox[c({$item.c_diary_comment_id})]"
とします。({$item.c_diary_comment_id})がコメントのIDとなる部分です。IDはコメント毎に番号が違うので、これでコメント単位にクルーピング出来ます。
同じような形にするならば、日記のほうも
rel="lightbox[d({$target_diary.c_diary_id})]"
と日記のIDを指定してもいいでしょう。この場合、日記とコメントのIDが重なる可能性もある（と言っても、ほとんど無いですが…）ので、それぞれのIDの頭に d や c の文字を付けて区別します。
■日記の一覧は、
webapp/modules/pc/templates/fh_daialy_list.tpl
です。
この144行目から146行目の target="_blank" の部分を
rel="lightbox[d({$item.c_diary_id})]"
と変更します。
日記の一覧には、複数の日記が表示されるので、日記毎にグルーピングするために、日記のID（{$item.c_diary_id}）を使います。
■日記の編集は、
webapp/modules/pc/templates/fh_daialy_edit.tpl
です。
この103行目、116行目、129行目の target="_blank" の部分を
rel="lightbox[dialyedit]"
と変更します。
ここは、１つの日記しか表示されないので、３つの画像をグルーピングするという意味で [diaryedit] と指定しました。ここの文字はなんでも構いません。
これで、日記の変更は完了です。
トピックへの組み込み
基本は日記と同じです。
トピックは、トピックの詳細と一覧の２つのテンプレートのみです。
それぞれのテンプレートと修正内容は以下のとおりです。
■トピック詳細
webapp/modules/pc/templates/c_topic_detail.tpl
23行目から25行目
rel="lightbox[t({$c_topic.c_commu_topic_id})]"
102行目から104行目
rel="lightbox[c({$item.c_commu_topic_comment_id})]"
■トピック一覧
webapp/modules/pc/templates/c_topic_list.tpl
63行目から65行目
rel="lightbox[d({$item.c_commu_topic_id})]"
イベントへの組み込み
イベントはトピックと同じ内容です。
■イベント詳細
webapp/modules/pc/templates/c_event_detail.tpl
26行目から28行目
rel="lightbox[t({$c_topic.c_commu_topic_id})]"
136行目から138行目
rel="lightbox[c({$item.c_commu_topic_comment_id})]"
■イベント一覧
webapp/modules/pc/templates/c_event_list.tpl
62行目から64行目
rel="lightbox[d({$item.c_commu_topic_id})]"
OpenPNEのバージョンが違うとテンプレートファイル名や修正する位置が異なりますので、バージョンに合わせて読み替えてください。
また、修正はご自分の責任でお願いします。
●参考にしたブログ
OpenPNE で Lightbox
コメントする