Flickrにアップしてる画像をMTにて表示させるプラグイン-FlickrPhotos Plugin

  • 指定したユーザーのPublic Photosをリストアップする(件数指定可能)
  • タグ情報を取得して、画像のタグへのリンクを表示可能
  • 画像サイズ,URL,タイトル,コメント数などを取得可能

トップページにBookmark experializing(閉鎖)のFeed情報を載せようと思ったのですが、うまくいかなかったのでFlickrに置いてる画像を取って来て飾るようにしてみました。

Flickrはサムネイル(その他サイズも)を生成してくれるので、自分で用意しなくても済む点が嬉しいですね。

FlickrプラグインのDL・UL

■Flickr Photos - MT (Movable Type) Hacks
上記よりプラグインをDLしたら、

  • extlibディレクトリの中身・・・MTルート/extlib
  • pluginsディレクトリの中身・・・MTルート/plugins

にそれぞれアップします。ディレクトリごとで良いです。
アップしたら メインメニュー→システムメニュー→プラグイン と辿り、プラグインが有効になっているか確認します。

テンプレート記述例

モジュール化して読み込ませても、直接アーカイブテンプレートに書いても良いと思います。
ここでは、ついでに画像に設定したタグも表示させるような記述をしてみます。

<MTFlickrPhotos username="ユーザー名" lastn="12" sort="date-posted-desc">
<a href="<$MTFlickrPhotoURL$>">
<img src="<$MTFlickrPhotoThumb size="s"$>" width="75" height="75" alt="<$MTFlickrPhotoTitle$>" />
</a>
</MTFlickrPhotos>

<p>
<MTFlickrPhotos username="ユーザー名" lastn="7" sort="date-posted-desc">
<MTIfFlickrPhotoTags>
<MTFlickrPhotoTags>
<a href="<MTFlickrPhotoTagURL>"><MTFlickrPhotoTagName></a>,
</MTFlickrPhotoTags>
</MTIfFlickrPhotoTags>
</MTFlickrPhotos>
</p>

タグに関しては、登録した順に同じものも表示されてしまうのが難点です。
これがなんとか出来れば良いんだけど。

追加されるタグやアトリビュート(主要なものだけ)

  • MTFlickrPhotoURL・・・画像URL
  • MTFlickrPhotoTitle・・・画像タイトル
  • MTFlickrPhotoThumb・・・画像表示
  • MTFlickrPhotoLInk・・・画像のリンク先

・sort

  • date-posted-desc (最後にアップロードした順番:デフォルト)
  • date-posted-asc (最初にアップロードした順番)
  • date-taken-asc (撮影日の古い順)
  • date-taken-desc (撮影日の新しい順)

・size

  • s (small square)
  • t (thubmnail)
  • m (small)
  • med (medium)
  • o (original size)

プラグインの設定

ブログの設定画面から行う事が出来ます。

  • Thumbnail Size・・・MTFlickrPhotoThumbタグで表示される画像サイズ
  • Linked To・・・MTFlickrPhotoLInkタグで表示されるリンク先の指定
  • Number of Photos・・・表示させる画像数
  • Cache・・・それぞれキャッシュの保持期間を指定
  • Get Photo Details・・・画像詳細の取得

アトリビュートによる指定は、この設定を上書きするので、ここでの設定をそのまま用いて画像を表示させる際には、アトリビュートによる指定は不要となります。
なので、上で示した例は、

<MTFlickrPhotos username="ユーザー名">
<$MTFlickrPhotoLink$>
</MTFlickrPhotos>

とするだけでも十分です。
ただし、MTFlickrPhotoLinkにより生成されるHTMLタグは、

<a href="URL" title="タイトル" target="_blank" class="mt-flickr-photo-link">
<img src="画像URL" width="100" height="75" alt="タイトル" border="0" class="mt-flickr-photo-image" />
</a>

となります。

プラグインを少し改造してみる

borderやtarget指定は不要なので、これを削除してみます。

MTルート/plugins/FlickrPhotos/FlickrPhotosLib.pm

をエディタで開いて、508行目の出力されるHTML文を修正します。
「mt-flickr-photo-image」で検索するとすぐ見つかります。

最後に

プラグインの設定を用いて、それに沿った画像を出力させても良いですし、アトリビュートを用いてテンプレートタグを細かく指定して出力させても良いし、どちらの方法でもとても便利に使用出来るプラグインです。

Squareサイズだときれいに整えられて表示されますが、Thumbnailサイズで少々ばらつきを持たせる表示方法も良いですね。


[参考記事]
■Flickr Photos - MT (Movable Type) Hacks
■ネットのサラダボウル: MTのFlickrプラグインを入れてみた。

▲ to Top

トラックバック(0)

▲ to Top