Thumbnail tag for Octopress (Jekyll).
octopress-thumbnail uses ImageMagick.
To install it, in Mac with Homebrew:
$ brew install imagemagick
In Cygwin with apt-cyg (in Windows):
$ apt-cyg install ImageMagick
or as you like.
Copy plugins/thumbnail.rb to your plugins directory.
After installing thumbnail.rb, you can use thumbnail tag in your Markdown files.
Usage is almost same as img tag in Octopress.
A syntax is:
{% thumbnail [class name(s)] [http[s]:/]/path/to/image [width [height]] [title text | "title text" ["alt text"]] %}
This is same as img tag, but
a class name with a size or width and height are necessary.
Examples:
- {% thumbnail /images/big_image.jpg 100 100 %}
This makes /images/thumbnail/big_image_100_100.jpg with 100x100px size, and adds HTML:
<img src="/images/thumbnail/big_image_100_100.jpg" width="100" height="100">
- {% thumbnail my-thumbnail /images/big_image.jpg %}
You can use class name to define the size. To use the class, define width/height in your _config.yml like:
# Thumbnails
thumbnails:
- my-thumbnail
my-thumbnail-width: 200
my-thumbnail-height: 200
Give class name to thumbnails, and define <class name>-width and <class name>-height.
Then, the tag makes /images/thumbnail/big_image_200_200.jpg with 200x200px size, and adds HTML:
<img class="my-thumbnail" src="/images/thumbnail/big_image_200_200.jpg" width="200" height="200">
- {% thumbnail my-thumbnail /images/big_image.jpg "This is a thumbnail" "Thumbnail" %}
You can add title/alt like img tag, too. This adds:
<img class="my-thumbnail" src="/images/thumbnail/big_image_200_200.jpg" width="200" height="200" title="This is a thumbnail" alt="Thumbnail">
- Use a variable as source path
You can use a variable for the source path.
Assume you have following settings in _config.yml:
images:
- a.jpg
- b.jpg
- c.jpg
then, you can use them in your post like:
{% for img in site.images %}
{% capture imgpath %}/images/{{img}}{% endcapture %}
{% thumbnail val:imgpath 100 100 %}
{% endfor %}
Put val: if you want to use a variable as a path.
This is same as:
{% thumbnail /images/a.jpg 100 100 %}
{% thumbnail /images/b.jpg 100 100 %}
{% thumbnail /images/c.jpg 100 100 %}
Note:
It keeps a ratio of width/height and doesn't upsize the file, only shrink the file.
- If the original file is 400x300px, and the thumbnail is 100x100px:
- Resize it to 133.3x100px, and crop 100x100px from left upper region.
- If the original file is 300x400px, and the thumbnail is 100x100px:
- Resize it to 100x133.3px, and crop 100x100px from left upper region.
- If the original file is 200x50px, and the thumbnail is 100x100px:
- Crop 100x100px from left upper region.
Note:
If a gif file is given, it just sets width and height and uses the original image.
(It is a bit difficult to minify gif automatically.)
If there is already a thumbnail, thumbnail tag doesn't make it.
If you updated the original file, then you need to delete the corresponding thumbnail to update it.
It is useful to modify a cleanup task in your Rakefile of Octopress, like
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
Then, all thumbnails will be cleaned up by rake clean.