Skip to content

Instantly share code, notes, and snippets.



Created Nov 2, 2013
What would you like to do?
Load encoded thumbnail from a gist

Quick demo showing how to get a Base64-encoded thumbnail.png file from a gist.

Thumbnails are very handy visual indicators of the content of a block on, esp for rapidly surveying a user's collection.

However, many block creators don't add thumbnails because of the extra steps involved in adding them to a gist. Since the gist API doesn't let you upload binaries you end up having to clone you're gist to add a thumbnail. Note: @mbostock's gist to clone all gists is useful here.

It's been suggested that the gist-img shell script enables you to upload thumbnail images. That's at least half true. It automates the base64 encoding of png images prior to upload with @defunkt's gist CLI tool, so you end up uploading the encoded text file.

In fact, it's easy enough to encode and upload such png files yourself: base64 < thumbnail.png | gist -u 3883098 -f thumbnail.png.B64 -.

Anyhoo ... doesn't currently recognize Base64-encoded thumbnails.

FWIW, I opened up an issue for the repo to see if @mbostock might enable (in all his copious free time!) the decoding of such thumbnails when rendering a block.

<!DOCTYPE html>
<meta charset="utf-8">
<script src=""></script>
#file {
margin-top: 25px;
margin-left: 50px;
font-family: "Helvetica Neue", sans-serif;
font-weight: 100;
font-size: 75px;
color: #777;
-webkit-font-smoothing: antialiased;
<div id="file"></div>
<img id="image" src=""/>
<script type="text/coffeescript">
url = ''
insert = (res) ->
gist = JSON.parse res
thumb = gist.files['thumbnail.png.B64']
file.textContent = thumb.filename
image.src = "data:image/png;base64," + thumb.content
get = (url, done) ->
xhr = new XMLHttpRequest()
xhr.onreadystatechange = ->
if (xhr.readyState is 4) and (xhr.status is 200)
done xhr.responseText"GET", url, true)
get url, insert
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment