Good blog posts have images that can be used as thumbnails for the posts inside and outside of the blog itself.
I’m sure Octopress has this covered but with Jekyll there’s some need for custom plugins. When I was looking around, there were lots of full asset pipelines for Jekyll but I don’t think I need something that complicated.
The simple approach was that each post have in their YAML front-matter a new extra custom tag
Note that in my approach the URL for image is the final relative published one for the full image. If this is not the case for your blog, you will need somewhat more complex code to handle that.
Another approach might be to parse the content of the post and pick the first image in the post, but this fails for postings that do not have real images in the body. A more thorough solution would look for both explicit and implied blog images.
The way I have done this on my Jekyll blog you are reading right now is that I have a custom generator that goes through all the posts that have the
image tag set, resizes them to the appropriate size (in my case 96x96), and adds these as
PostlThumbnailImages to Jekyll’s
I also have
PostImages generator that just makes sure that I’m not serving overly sized files and resizes all images in
_/image/ folder that are larger than the website needs. This is why the images are in a folder prefixed with an underscore that Jekyll doesn’t automatically touch when generating the site.
Resizing is easy, but many services and my website prefer square thumbnails so I also need to crop the post images to a 1:1 aspect ratio. Instead of just centering on the image, there are smart ways to do the cropping by checking where the action in the image is and focus on that (ie. content aware cropping). I’ve used the
smartcropper gem to do this magic and it works pretty well.
To finish things off, I’ve also created a Liquid filter that takes the full image url and replaces that with the thumbnail’s. As the only difference is in the path (in my case), it’s quite straightforward:
This can be then used in a Jekyll template like this:
The main use for
post.image (and it’s thumbnail version) is in your own blog’s design but it can also be used for the metadata for the posts.