Skip to content

Instantly share code, notes, and snippets.

@joyrexus

joyrexus/README.md

Created November 2, 2013 18:24
Show Gist options
  • Save joyrexus/7281926 to your computer and use it in GitHub Desktop.
Save joyrexus/7281926 to your computer and use it in GitHub Desktop.
Download ZIP
Load encoded thumbnail from a gist
Raw
README.md

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 bl.ocks.org, 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 ... bl.ocks.org doesn't currently recognize Base64-encoded thumbnails.

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

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://jashkenas.github.io/coffee-script/extras/coffee-script.js"></script>
<style>
#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;
}
</style>
<body>
<div id="file"></div>
<img id="image" src=""/>
<script type="text/coffeescript">
url = 'https://api.github.com/gists/7280524'
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
xhr.open("GET", url, true)
xhr.send()
get url, insert
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment