MTでフォトログ出来るテンプレートセット:Photogallery Template Set for MT

フォトログ用のテンプレートを作ってみました。

エントリーにアップした画像を 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つの表示内容を準備してます。

  1. ほぼデフォルト状態の記事概要表示・・・初期設定
  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: サムネイルのサイズを自在に操る

▲ to Top

トラックバック(0)

▲ to Top