CODEWITHSUNDEEP
gitgithubgist
Dimitry
Dimitry

Reputation: 4593

Gist: How are images uploaded to a gist?

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.

Upvotes: 171

Views: 51247

Answers (10)

Feri
Feri

Reputation: 3297

If you upload an image, try these steps:

  • Convert your image into DataURI.
  • 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

Upvotes: -4

Gant Laborde
Gant Laborde

Reputation: 6774

How to put images in your Gist URL:

  1. UPLOAD your image to a site 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](URL)

Upvotes: 4

rmharrison
rmharrison

Reputation: 5308

Clone gist with SSH:

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

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

Upvotes: 10

msparkles
msparkles

Reputation: 1

This above answer is correct but added a bit more detail...

  1. Create the Gist AND SAVE IT
  2. Since it is saved a comment field will show at the bottom.
  3. 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.
  4. You can check that this code works by toggling to the preview tab at the top of the comment.
  5. Copy this code and EDIT your gist and paste the code

Upvotes: 0

VonC
VonC

Reputation: 1327484

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

Update Sept. 2021

File attachment support in Markdown for gists

You can now add images and videos to Markdown files in gists by pasting them into the Markdown body or selecting them from the dialog at the bottom of the Markdown file.

For information on supported file types, see the documentation.

As announced by tweet

If you checkout https://gist.github.com, you can now easily include images and videos in your markdown files.

Paste the image in or browse your file system to attach. Let us know what you think.

who-says-you-shouldn-t-ship-on-a-friday-if-you-checkout-scloudtomp3downloader.com

Upvotes: 5

ow3n
ow3n

Reputation: 6607

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

Upvotes: 149

Gubatron
Gubatron

Reputation: 6479

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

Upvotes: 0

thiagoh
thiagoh

Reputation: 7388

  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

Upvotes: 54

Binarycrayon
Binarycrayon

Reputation: 1045

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.

Upvotes: 85

mhucka
mhucka

Reputation: 2399

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.

Upvotes: 4

Related Questions