Automatically generating Github-like og:images in Jekyll
Github generates social images for repositories automatically. This post is about how to accomplish a similar thing for blog posts written in Jekyll.
I quite like it. It’s simple. It shows the description, the languages, popularity. A nice summary. That’s what I took as a point of reference for generating previews.
The instructions here are for a blog running on Jekyll. If you want to replicate it on another platform the general steps are:
Next, I created previews.rb in the _plugins directory. This script copies any posts with auto_image set to true in the front matter whenever files are read.
Because Jekyll would load the files already in the previews directory before this step, it would result in warnings where two documents in the collection contained the same file. To handle that I added a hook that clears the directory.
To render just the preview, I created a preview.html in the layouts directory. I just took the post.html layout and removed everything but the picture, name, title and excerpt. I also adjusted the css a bit to make it fit within a 600x315 container.
