2006_0513.jpg
flickrもProアカウントを取ったことですし、昔の写真からどんどん乗せていってるんですが、そうなるとブログ上にランダムに写真を載せたいなと思います。
で、早速チャレンジです。
調べてすぐにこれだ!と思ったのはOgawa::MemorandaさんのFlickrPublicPhotos Pluginで、これはflickrのまさにflickr内の自分の写真をさまざまな形でリストアップしてくれます。
導入に際してちょっと分からないところがありました。


必要なものに

Cal Henderson作の以下の3つのPerl Moduleがインストールされている必要があります。
Flickr::API
XML::Parser::Lite::Tree
XML::Parser::Lite::Tree::XPath

とありまして、これがよく分からない。
ちょっと挫折しかかりましたがblog:N@TURE BRAINさんのFlickrのPhotosetをMovableTypeに表示する (MTFlickrPhotosets)にこの3つのPerl Moduleのインストール方法が書かれているの発見!
これを参考にされていただきました。

インストール

MovableTypeのpluginsディレクトリにFlickrPublicPhotos.pl(入手はこちら)をアップロード。
MTCGIPath/extlib/Flickrを作成してAPI.pmをアップロード。
MTCGIPath/extlib/Flickr/APIを作成してRequest.pmとResponse.pmをアップロード。
MTCGIPath/extlib/XML/Parser/Liteを作成してTree.pmをアップロード。
MTCGIPath/extlib/XML/Parser/Lite/Treeを作成してXPath.pmをアップロード。
以上で終了。メインメニューの「利用可能なプラグインの設定」にFlickrPublicPhotos Pluginがあるか確認します。

テンプレート修正

使えるタグはこちら(FlickrPublicPhotos Plugin)で確認してください。
私はトップページの中央カラム、記事の上にスクエア画像を6個並べるようにし、写真をクリックするとミディアムサイズの画像がlightboxの効果で浮かび上がるようにしました。
写真をクリックしたらその写真のflickrのページに飛ばすのもありですがせっかくの効果を楽しみたいなと思いまして。
その代わりに右下にflickrへのリンクをつくっておきました。

<p>
<MTFlickrPublicPhotos user="(ユーザーID)" random="6">
<a href="<$MTFlickrPublicPhotoImgURL size="m"$>"
title="<$MTFlickrPublicPhotoTitle encode_html="1"$>" rel="lightbox">
<img class="flick_sq" src="<$MTFlickrPublicPhotoImgURL size="sq"$>" />
</a>
</MTFlickrPublicPhotos>
</p>
<div class="
flickr_link">Flickr Photo Stream <a href="http://www.flickr.com/photos/ash427/" target="_brank">Go! <img src="http://eternalheart.com/img/flickr_logo.gif" title="Flickr" /></a>
</div>

スタイルシートの修正

画像をぴったりくっつけたいのでいろいろやってみたんですが結局こんなんでできました。正解?

.flick_sq {
float: left;
}

もっとすっきりかけるのかもしれませんがこんなもので・・・
見せ方はいろいろ試して見たほうがいいですね。
まっ一応形になりました。

カテゴリー: MovableType

2件のコメント

[N] · 2006年6月26日 9:26 PM

Movable Type用のFlickrプラグイン

xiaostyle.orgの運用にあたり、いろいろと調べていたところ、Movable TypeにFlickrプラグインを入れてみるのも一つの方法かと思い調…

kwWiki (PukiWiki/TrackBack 0.3) · 2007年1月22日 12:15 AM

Web/MovableType/Filckr

Filckr ★ ↑Flickrの画像を表示する ★ Flickrを画像置き場にしてそのリンクを張ってブログを書きたいと思います。 Mov…

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

MovableType

iPod Touchから投稿

iPodからの投稿です。 キーボードが小さくてなかなか大変です。 でも 続きを読む …

MovableType

PholiotのxmlをEntryImagesプラグインで作成すると良いですぞ!

エタハーではおなじみの右上に写真がじわじわ動いているブログパーツ、Ph 続きを読む …

MovableType

MTの検索をAjaxで高速化する、さらにタグクラウドもAjaxで表示!

またまたタグクラウド関連なのですが、普通検索もそうですけど、MTの検索 続きを読む …