フォトログ用のテンプレートを作ってみました。
エントリーにアップした画像を Smooth Gallery を用いて表示させます。
■JonDesign's (Javascript) SmoothGallery 2.0
MT4.1からの新機能である「テンプレートセット」を利用してます。
■テンプレートセットの登録 | Movable Type 4 ドキュメント
Photogallery Template Set for MT
- 2008/03/31:初版 (Ver.1.00)
- デモサイト・・・MTPhotoGallery:トラックバック機能は無効にしてます。
■追記:2011/01/17
「初版」付けながら全然更新してなくてすいません。。。
もし、使ってくれてる方がいらしたらほんとありがとございます_(..)_
ちょっと別方面に興味が向いてるので、これからも更新はない可能性が高いですが、また写真用のテンプレートを作る余裕が出来たらやってみようと思います。
フォトログ用テンプレート・ファイルのDL・UL
下記よりファイルをDLします。
解凍したファイルをそれぞれのフォルダにそのままアップします。
- mt-staticフォルダ内のファイル「themes-mtphotogallery」⇒mt-static内に。
- pluginsフォルダ内のファイル「mtphotogallery」⇒MT内のplugins内に。
管理画面のシステムメニュー⇒プラグイン に入って、以下のように表示されてるか確認します。
テンプレートの入れ換え
■テンプレートセットの選択と入れ替え | Movable Type 4 ドキュメント
必要に応じてバックアップを取るようにして下さい。
初期化の終了後は新しいテンプレートが適用されてるか確認してみて下さい。
注意するテンプレート内容
注意するテンプレートは以下になります。
インデックス・テンプレート
- アーカイブ・テンプレート・・・出力パスを変更してます。「archives/index.html」
アーカイブ・テンプレート
- ブログ記事リスト・・・アーカイブマッピング⇒「%y%m/%i」 (デフォルト:%y/%m/%i)
アーカイブテンプレート
カテゴリ・アーカイブ(アーカイブテンプレート⇒ブログ記事リスト)
2つの表示内容を準備してます。
- ほぼデフォルト状態の記事概要表示・・・初期設定
- 画像サムネイルと画像情報を表示させるタイプ・・・パターンB
モジュールテンプレート⇒ブログ記事の概要 の中で表示内容の調整を行います。
パターンBは ignoreタグ にて表示されないようにしてます。
表示例はこちら⇒■カテゴリ01 アーカイブ - MTPhotoGallery
月別アーカイブ(アーカイブテンプレート⇒ブログ記事リスト)
カレンダー形式で、その日のエントリーの画像サムネイルをひとつ表示させます。
「themes-mtphotogallery」について
スタイルシートやSmoothGallery用のJavaScript等はこの中に入れてあります。
このフォルダ名を変更した際には、以下の部分の記述を変更したフォルダ名に変えて下さい。
「モジュールテンプレート」⇒「module_commonvar」内の変数定義。
変更後に再構築する事で反映されます。
ギャラリー用のテンプレート
インデックステンプレートの「メイン・インデックス」、「アーカイブ・インデックス」にて、フォトギャラリーは表示されます。
モジュールテンプレート「module_photogallery」内にて表示数と表示内容を設定します。
メイン・インデックスの画像表示初期値は「30」。
アーカイブ・インデックスではカテゴリー別に画像が出ます。
表示数の設定は行ってないので、必要に応じて表示数の制限を行うようにして下さい。
表示サイズの調整
画像の表示画面サイズはスタイルシートで行います。
mt-static/themes-mtphotogallery/css/jd.gallery.css
#myGallery, #myGallerySet, #flickrGallery
{
width: 460px;
height: 345px;
z-index:5;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
上記の width と height で画面サイズの調整を行います。
配布されている状態のデフォルトサイズを設定してます。
ギャラリー内での表示項目
ファイルアップ機能を利用して画像をアップする際に設定出来る、
- アイテム名
- アイテム概要(未入力ならエントリー概要)
- カテゴリ名・・・アーカイブ・インデックスでのギャラリーの際に表示
が、表示項目となってます。
ギャラリー設定その他
モジュールテンプレート⇒module_meta 内に、画像表示のオプションをコメントしてます。
スライドショーとしての機能を働かせたい場合等にオプション指定を行います。
ギャラリー内のサムネイルは「<$MTAssetThumbnailURL$>」を用いて自動生成させてます。
サムネイル用のサイズは width=100 height=75 なので、横幅を基準に出力させてあります。
よって、表示画像は必ず100-75として生成されるものではありません。
その他
1つのエントリーで1つの画像が入ってる事を基準にしてます。
このテンプレートでは、エントリー内に画像表示を行う際は、横幅の最大は560px辺りを目安にして下さい。
スタイルを変えて1カラムにしたりして、より大きな画像表示は可能です。
色んなサイズを試してみたのですが、ギャラリーの表示枠より大きい画像や小さい画像も利用は出来ますが、基本的には枠のサイズに併せて使うのが良さそうかな、と思いました。参考に。
以上です。
参考
■テンプレートセットの作り方 - Movable Type 備忘録
■テンプレートセット・プラグインの作り方 (WolaWola)
■MTSetVar(Block)/MTIfタグの具体的な利用例。 (Junnama Online (Mirror))
■WingMemo: サムネイルのサイズを自在に操る