Gist: How are images uploaded to a gist?

161
votes

Here is the image file: https://gist.github.com/mbostock/5503544#file-thumbnail-png

I tried to drag-and-drop the image file in the edit mode of a gist. That didn't seem to work in Chrome and FireFox.

Update: After back and forth emails with GitHub, this feature (drag-and-drop binary files, including images) isn't supported.

8
gitgithubgist
it is easy ... just use any git client ... sync project from , copy file to project's directory, add to repo (git add), commit and sync again ... – Selvin
fx ... git clone https://gist.github.com/6afe8ae9d00c98694dc8, cd 6afe8ae9d00c98694dc8, xcopy path/to/src/file.any file.any, git add any.any, git commit -m 'n/a', git push – Selvin
Several methods are shown here - gist.github.com/cben/46d9536baacb7c5d196c. – slm

8 Answers

121
votes

With a little creativity you can achieve this faster than cloning. To drag/drop:

  1. Create the Gist
  2. Drag an image into the comment field below. This will auto-upload your image file to https://user-images.githubusercontent.com and insert markdown code in the comment field to display the image.
  3. Copy this markdown code to your gist

Note: It is not required that you submit the comment.

Live example

Screenshot of comment field

84
votes

I was looking for answer for the same question, here is what I just found:

  1. You can clone your gist as a git repository and add your picture, then push to origin. See loading-thumbnail-into-gist-for.

  2. There is a script written to do this: hecticjeff/gist-img.

I have not tried the above solutions yet, but pretty sure they should work. I did try using defunkt/gist to update my gist with a png but ended up displaying a binary file in my gist.

50
votes
  1. Create a gist or reuse one of your gists.

  2. Clone your gist:

    git clone https://gist.github.com/<hash>.git

  3. Add your image to your gist's repository:

    git add my-image.jpg

  4. Commit the image:

    git commit -m "adding my image to my gist"

  5. Update gist by pushing you modifications:

    git push origin master
8
votes

Clone gist with SSH:

$ git clone [email protected]:<hash>.git mygist

HTTP clone worked fine, but ran into HTTP authentication problems at git push.

4
votes

I was looking for an answer to this same question too, in my case in order to be able to upload PDF files. I had trouble with gist-img (mentioned in another answer to this question). I searched some more and discovered gistup, which worked perfectly, the first time I tried it. It uses node and npm, so it should work on most major operating systems.

3
votes

How to put images in your Gist url:

  1. upload your image to a place like imgur.com for free, then get the hot-link.
  2. Add a file and give it a markdown extension .md and use markdown image syntax:

![alt text here](https://URL)

  1. ?????
  2. Profit
0
votes

uploading the image somewhere and using the HTML <img> tag works for me

-4
votes

If you upload an image, try these steps:

  • Convert your image into DataURI. For example here on duri.me
  • Then this string insert to GIST as a text file

If you want to convert back, there are several options. For example, this: Converting data URI to image data