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
