Octopressでサムネイルを作るプラグインを作った

これまでブログのサムネイル的な物を使いたい時に NailThumbを使って縮小した画像を使ったり ¹、直接imgタグでサイズを指定してリサイズしたり ² してましたが、大きいサイズのままのものを使うので特にサイドバーに表示する小さい画像用のものにはかなり無駄でした。

なのでOctopressでgenerateする際に自動で小さい画像も作ってそれを貼り付けられる様なプラグインを作りました。

octopress-thumbnail
他のプラグインやMiniMagick等のRubyラッパーについて

octopress-thumbnail

インストールは上のレポジトリの中にplugins/thumbnail.rbというプラグインが入っているのでそれをOctopressのpluginsディレクトリに入れるだけです。

Octopressで使うために作りましたが、基本的にはJekyllでも使えるはずです。

ImageMagickを使うのでそれは別途インストールしてください。

Macなら

$ brew install imagemagick

Windows + Cygwin (or MobaXterm) + apt-cyg なら

$ apt-cyg install ImageMagick

でインストールできます。(apt-cygの方は大文字を使うので注意。)

これで、thumbnailというタグが使える様になります。

タグの使い方はOctopressのimgタグと殆ど一緒です。書式は全く一緒ですがサイズを指定するためのクラスか width/heightによるサイズ指定が必ず必要なところだけが違います。タイトルやalt等はimgタグ同様使えます。

実際に行うことは、例えば

{% thumbnail /images/big_image.jpg 100 100 %}

と書いたとすると、 source/images/big_image.jpgがある場合、 source/images/thumbnail/big_image_100_100.jpgという 100x100pxのファイルを作ります。

さらにHTMLとして

<img src="/images/thumbnail/big_image_100_100.jpg" width="100" height="100">

を書き出します。

もし既に source/images/thumbnail/big_image_100_100.jpgがある場合はファイルはそのままにHTMLだけを書き出します。

また、ファイルの指定として外部ファイル(http://…)を指定したり sourceディレクトリ以下に無いものに関しては何もせずそのままオリジナルのファイルを指定します。

サイズの指定としてはクラス名を使うことも出来ます。

my-thumbnailというクラスを使いたい場合、 __config.ymlの中に

# Thumbnails
thumbnails:
  - my-thumbnail
my-thumbnail-width: 200
my-thumbnail-height: 200

という設定を用意します。複数のクラスを使いたい場合は

# Thumbnails
thumbnails:
  - my-thumbnail
  - my-another-thumbnail
my-thumbnail-width: 200
my-thumbnail-height: 200
my-another-thumbnail-width: 100
my-another-thumbnail-height: 50

の様にthumbnailsへクラス名を加えて <class name>-width、 <class name>-height を言う値でサイズを設定します。

これで

{% thumbnail my-thumbnail /images/big_image.jpg %}

とすると

<img class="my-thumbnail" src="/images/thumbnail/big_image_200_200.jpg" width="200" height="200">

というHTMLが出来ます。

リサイズする際に、縦横の比率は保ったままリサイズし最終的に左上から切り取るようにしてサムネイルを作ります。

また、指定のサイズより元のファイルが小さい場合はリサイズは行いません。横か縦だけが大きければ切り取りだけ行います。

なので元のファイルを変更したらサムネイルファイルも削除する必要があります。

もし、一度全部を作り直したい場合には Octopressの場合 Rakefileの中のcleanタスクを以下のように変更しておくと便利です。

desc "Clean out caches: .pygments-cache, .gist-cache, .sass-cache, thumbnail"
task :clean do
  rm_rf [Dir.glob(".pygments-cache/**"), Dir.glob(".gist-cache/**"), Dir.glob(".sass-cache/**"), "#{source_dir}/stylesheets/screen.css"]
  rm_rf [Dir.glob("#{source_dir}/images/**/thumbnail")]
end

これでrake cleanでサムネイルも全部消してくれます。

例としてオリジナルがこんな感じのファイルを

100x100pxに

200x50pxに

他のプラグインやMiniMagick等のRubyラッパーについて

ちょっと探してみるとJekyll用のプラグインで mrdanadams/jekyll-thumbnailer という物がありました。

やってることは大体同じような事ですが、サイズの指定の仕方とかで上の様にimgタグの様にしてクラス名とかで簡単に指定、変更出来る様にしたりしたかったので上のプラグインを作りました。

また、このプラグインの中ではMiniMagickというRubyのGemを使っています。

これはImageMagickのラッパーモジュールで、実際に使う時にはImageMagickが必要です。

MiniMagickを使うとRubyな感じでサイズを調べたり、変換したり出来るので便利、ということですが、それ程複雑な事をしない限りは直接コマンドを打ったほうが楽だと思います。

加えてMiniMagickを使うとそのままconvertコマンドを打つのに比べて 5倍から10倍くらい遅くなってしまう様です³。さらにメモリーリークの問題も ⁴。

元々RMagickというGemがあってこれがメモリーリークとか果てしなくどうしようもないので最近はMiniMagickが使われてる様ですが、ちょっと変換するくらいだったら直接コマンドを使った方が楽なくらいなので上のプラグインの中ではサイズを調べるidentifyや変換のconvertコマンドはそのままコマンドとして実行しています。