/ News

Thumbnails

June 14, 2016

Blot now generates thumbnails automatically. Use them like this:

{{#thumbnail.medium}}
    <img src="{{url}}" width="{{width}}" height="{{height}}">
{{/thumbnail.medium}}

Why is this useful?

Now you could run an image blog like mine on Blot. You could generate magazine style layouts automatically. You could tell Twitter and Facebook to show the thumbnail when someone shares a link to your blog.

How it works

Blot generates a thumbnail from a path or URL to a thumbnail in your entry’s metadata, or the largest JPEG or PNG image in your blog post. If your blog post has no image, then your blog post will not have a thumbnail. Blot will not increase the size of smaller images.

How to use the thumbnails

Blot generates four sizes of thumbnails. These may change!

The JSON added to each entry looks something like this:

{
    ...
    thumbnail: {
        small: {url: "//blotcdn...", width: 160, height: 103},
        medium: {url: "//blotcdn...", width: 640, height: 411},
        large: {url: "//blotcdn...", width: 1060, height: 681},
        square: {url: "//blotcdn...", width: 160, height: 160 }
    },
    ...
}

In future, I plan to add GIF and SVG support. I’m open to making the dimensions user-specified in future. In the meantime, please play around and let me know what you think. I’m sure there will be bugs. Please tell me about them. Once I’m happy I’ll add the feature to the documentation.