So you’re using gistup to create gists (and blocks) from the command line. If not, see this tutorial for a quick overview.
And now you want to add thumbnails to your gists so that your blocks portfolio looks all pretty, right. How?
To have a thumbnail associated with your gist you need to create a 230x120
pixel PNG image file named thumbnail.png and include this at the top-level of
your gist’s repo (generated by gistup).
The main trick is in finding an appropriate image and then right-sizing it for
the 230x120 dimensions that the blocks site expects your thumbnail.png to
be.
If you’re pulling a pre-existing image, you can use Preview (at least Mac users can) to resize and crop the image as needed. You’ll need to …
crop the base image for proper framing
resize to the lesser of 230 width or 120 height
copy and paste the resized base image into a thumbnail template (see thumbnail-template.png) with the exact sizing needed
export as thumbnail.png
If you’ve already got a gist with an index.html file that renders something
at the top of its associated block, you can use the following steps to get a
screenshot of that rendering to use as the basis of your thumbnail:
Go to your block, e.g., bl.ocks.org/4060606
Command-Shift-4, drag a 960x500 box inside the gray border of the
rendered content
Double click the gist number (4060606) and copy
Paste to rename the new screenshot (becomes 4060606.png)
Resize with GraphicsMagick via …
gm convert -resize 230x120 4060606.png thumbnail.png
Add the resulting thumbnail to your repo via …
git add thumbnail.png
git commit -m 'Add thumbnail'
git push