rcmdnk's blog

20150610_thumbnail_200_200

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

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

Sponsored Links

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に

20150610_thumbnail_100_100

200x50pxに

20150610_thumbnail_200_50

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

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

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

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

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

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

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

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

Sponsored Links
Sponsored Links

« Octopress (Jekyll)のプラグインの中でファイルを作成してサイトに入れる方法 OctopressでJekyllコマンドをきちんとTraceする »