flickrの画像をOctopressに埋め込むTips

Octopressの画像置き場をどうするか考えてflickrにしてみた。

public/images以下に置いておくのがデフォルトなんだろうけど、 githubにあんまりバイナリを置くのも悪いしなぁと思って色々探していた。

見つけたのが、octopress-flickr。

https://github.com/neilk/octopress-flickr

OctopressのGemfileに以下を追加して、

1gem 'flickraw'
2gem 'builder', '> 2.0.0'
3gem 'persistent_memoize'

以下を実行する。 /path/to/octopress/には自分のoctopressのパスを入れよう。

git clone https://github.com/neilk/octopress-flickr
cd octopress-flickr
find . \( -name '*.rb' -o -name '*.scss' \) -exec cp {} /path/to/octopress/{} \;

次にAPIキーをflickrで作成する。

http://www.flickr.com/services/developer/api/

取ってきたAPIキーとシークレットキーを環境変数に入れる。直接定義ファイルとかに入れないのはセキュリティのためだろうね。

export FLICKR_API_KEY=your_api_key
export FLICKR_API_SECRET=your_api_secret

以上で準備は終わり。Octopressのポストにflickr画像用のタグを挿入する。まず、flickrの写真を拡大表示した時のURLからパスの最後の数字をとる。例えば以下のURLだったら、8901098353が画像のIDだ。 http://www.flickr.com/photos/36392485@N08/8901098353/

このIDを以下のようにタグに入れ、本文に挿入する。 IDの右のnは画像のサイズ、centerは位置、その後ろの文字列はキャプションだ。

{% flickr_image 8901098353 n center 'sample picture' %}

この記事に画像を読み込んだ結果は以下となる。

///2014.03 加筆: ブログをOctpressから独自アプリに移行したため、このページ内での確認はできなくなりました。