Movable Typeのインストール方法、Movable Type用のプラグイン、Ajaxを使ったカスタマイズ例などをご紹介しています。「あんなことできないかなぁ」、「こんなことできたらいいなぁ」を形にしていきたいですの。

Movable Type 備忘録

サイドバーにランダム画像表示する

May142006
Vote:
http://bizcaz.com/archives/2006/05/14-201504.php
Categories: Customize
Tags: Customize, MovableType, MTPhotoGallery, Photo, Plugins, Sidebar
Social Bookmark

Prev Page: エントリでMovableTypeのタグを使用する
Next Page: 関連するエントリ一覧を表示してみる

わたしと相方(猫)は大の仲良し相方は、家に帰ったわたしの側を離れようとしません。(たまに歩くのが邪魔になることも、しばしば)

そんな相方の画像を表示しようと思ってはみたものの、画像のアップが面倒くさいという理由でやめてました。
わたしの希望としては、

自動化必須
毎回画像表示のためにテンプレートをいじるのも面倒だし。
ランダム表示
サムネイル画像をランダム表示してくれると嬉しい。
表示数限定
表示する画像の数を指定できると助かる♪

という、わたしの希望を満たしてくれるプラグイン(または、JAVAスクリプト)を探して、いつものように徘徊したところ、あった

今回は、サイドバーにランダムに画像を表示するカスタマイズを紹介します。

画像を一覧表示するには、MTPhotoGalleryプラグインを使用します。MTPhotoGalleryプラグインは、指定したフォルダにある画像を一覧表示、ランダム表示したり、またはランダムに1つを表示できたりするプラグインです。

今回参考にしたサイトは、本家とぴょんぴょん・おーじ様です。

▼MTPhotoGalleryプラグインの入手はこちらから▼
http://brandon.fuller.name/archives/hacks/mtphotogallery/#download

MTPhotoGalleryプラグインの動作条件

MTPhotoGalleryプラグインにより画像を一覧表示させるには以下の条件があります。

This plugin works with Movable Type version 2.x and 3.x.
MovableTypeのバージョンが 2.x 以上であること。
Perl version 5.8.5 or higher.
Perl のバージョンが 5.8.5 以上であること。
You must have the Perl module, Storable, installed.
サーバーに Storable がインストールされていること。
his plugin will only work in static (not dynamic) templates.
静的テンプレートであること。動的に作成されるテンプレート(ダイナミック・パブリッシングなど)では使えない。

とのことです。
上記の Perl module Storable のインストール確認は、mt/mt-check.cgi をブラウザから実行すると確認できます。たぶん、レンタル・サーバーを使っている人なら全然気にしなくてもいいように思います。

カスタマイズ方法

まず、MTPhotoGalleryプラグインをインストールします。上記URLから PhotoGallery.zip という圧縮ファイルをダウンロードしてください。そして、適当なフォルダに展開していつもの /mt/plugins/ ディレクトリにアップロードします。

次にランダム表示させたいテンプレートを修正します。テンプレート中のランダム表示させたい部分に、以下のコードを追加します。

<MTPhotoGallery path="/moblog/image/" sort_order="random" count="1"><img src="<MTPhotoGalleryImageLink>" width="120" height="160" alt="PHOTO" /></MTPhotoGallery>

青い字の部分には、画像を保存しているディレクトリ名を指定します。わたしの場合は、モブログで投稿した画像が /moblog/image/ に保存されているので、上記のように指定しました。赤い字の部分はランダム表示を支持しています。デフォルトは名前順です。緑の字の部分では、表示する画像数を指定しています。表示数指定なしの場合、ディレクトリ内の画像ファイルの一覧表示となります。また、ピンクの字では表示されるときの画像サイズ(小さいサイズ)を指定します。このサイズを省くと、元画像サイズで表示されます。

小さい画像をクリックで、元画像サイズを表示させたい場合には、以下のようなコードとなります。

<MTPhotoGallery path="/moblog/image/" sort_order="random" count="1"><a href="<MTPhotoGalleryImageLink>"><img src="<MTPhotoGalleryImageLink>" width="120" height="160" alt="PHOTO" /></a></MTPhotoGallery>

青い字の部分で元画像のリンクを追加しています。

また、表示順を指定したい場合には、以下のようなコードとなります。例えば、降順で表示させたい場合。

<MTPhotoGallery path="/moblog/image/" sort_order="descend"><img src="<MTPhotoGalleryImageLink>" /></MTPhotoGallery>

青い字の部分で、降順(descend)を指定します。昇順ソートの場合は ascend となります。さらに、画像と関係したエントリとリンクさせたい場合には以下のようなコードとなります。

<MTPhotoGallery path="/moblog/image/" sort_order="random">
<img src="<MTPhotoGalleryImageLink>">
<a href="<$MTCGIPath$><$MTSearchScript$>?search=<MTPhotoGalleryImageLink>">Find related posts</a>
</MTPhotoGallery>

追加したら、いつもの保存して再構築してください。

表示確認します。 MTPhotoGalleryプラグインで指定したディレクトリに、適当な画像を放り込んでみてください。画像が表示されればOKです。

以上で、サイドバーに画像をランダム表示させることができました。画像のファイル名を日付にするかタイトル名にすると、MTPhotoGalleryプラグインのタグで画像といっしょに日付を表示したり、タイトル名を表示させることができるようです。
ファイル名の付け方また、ランダム表示といっても、アクセス時にランダムに表示されるのではなく、再構築時にランダムに選択されるようです。

自動的に再構築させたい場合には、こちらのMovableTypeを自動的に再構築するを参考にしてください。

今回サイドバーに画像をランダムに表示できるプラグインとして、MTPhotoGalleryプラグインを紹介していますが、このプラグインをフォトギャラリーみたいなページに使った場合、不都合が生じます。このプラグインでは、画像の一覧は縦に羅列されますので、横に羅列するにはGridプラグインなるものとタイアップする必要があるようです。
詳しくは、本家のページExamples: 6を参考にしてください。

SEE YOU

Edit
Permalink
2 Comments
No TrackBacks

Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

Comments(2)

#1: Posted by nisiyama @ August 8, 2006 [REPLY]: 貴殿のブログは大変参考になります。
ところで、この画像表示は
MovableType 3.31-ja では対応出来ないのでしょうか？
色々試してますがうまく行きません。
ご教授頂けませんでしょうか。