46

I am using GitHub Pages, Jekyll, and Prose to manage a Website. Everything works fine, besides I cannot find a way to upload images. The Prose image uploader is not working probably as discussed in various tickets (for instance here).

Since the Website is for a friend without any git or command line experience, I am looking for another option to upload images easily from the browser to GitHub. Are there any other options like this? I don't want to host the image on an external site.

ustroetz
  • 5,802
  • 16
  • 47
  • 74

7 Answers7

31

It is possible to upload the images from the browser, without using Git.

Create a new GitHub issue and drag the image into the textbox.
GitHub will upload the image and create a link like this one:
https://f.cloud.github.com/assets/19977/1656110/a3f8b280-5b6d-11e3-818d-c06ab05bd613.jpg

Source: GitHub's Phil Haack

Christian Specht
  • 35,843
  • 15
  • 128
  • 182
  • 8
    That is interesting and close to answering my question. Unfortunately the image doesn't get stored in my repository. Ideally I can choose the location where the image gets stored. – ustroetz Jan 06 '14 at 21:11
  • Found a site showing how at http://solutionoptimist.com/2013/12/28/awesome-github-tricks/ – Ruskin Apr 08 '14 at 16:02
  • 2
    Don't see anything in Ruskin's link that answers the question of how to upload an image into a repository directly. – funroll Apr 29 '14 at 12:28
  • In fact, part 1 of the link describes **exactly** the same approach like my answer. – Christian Specht Jun 28 '14 at 15:01
  • It probably doesn't work any more. I draged the image on textarea and the browser just navigated to display the image through `file` pseudo protocol. – Tomáš Zato Nov 20 '14 at 11:35
  • 1
    @TomášZato: I just tested it...it still works as described above! – Christian Specht Mar 17 '15 at 20:34
  • **I'd strongly recommend against using this hack** because there's no guarantees your image will be kept in the GitHub issues storage forever when no issues are referencing it anymore. GitHub most likely have a background process that (at some point) will notice that no issues are referencing the image uploaded, and remove the image from their issues storage, and your repository will have broken images which you won't have stored anywhere. – C. Augusto Proiete May 12 '18 at 07:40
11

GitHub just added this functionality:

https://help.github.com/articles/adding-a-file-to-a-repository/

Example:

GH Image upload

wjdp
  • 1,468
  • 19
  • 36
ryanpcmcquen
  • 6,285
  • 3
  • 24
  • 37
5

The workaround I use, is to base64 encode images, here is one tool that will do that for you (it even offers image optimization): https://www.base64-image.de/

Then you can just click copy image and that will give you a long string of characters that can be used inside of an <img>'s src="", or a markdown embedded image ![alt text](data:image/png;crazy-long-string-of-characters).

I did that for this blog post I wrote from a ChromeBook:

https://ryanpcmcquen.org/javascript/2015/10/20/fix-hackpad-printing.html

The screenshots there are base64!

ryanpcmcquen
  • 6,285
  • 3
  • 24
  • 37
  • That's an interesting solution. Though it still is a workaround and requires to use an external website. I am looking for a solution where one can upload images directly to Github. – ustroetz Oct 21 '15 at 16:21
  • This technique does not seem to work on GitHub, an _src_ attribute is not rendered. Your link does not reference a GitHub example either. – quickshiftin Feb 27 '18 at 17:49
  • @quickshiftin, it is a site hosted via GitHub pages: https://raw.githubusercontent.com/ryanpcmcquen/ryanpcmcquen.github.io/master/_posts/2015-10-20-fix-hackpad-printing.md – ryanpcmcquen Feb 27 '18 at 19:29
  • Very strange, I copied one of your embedded images to a wiki page I'm working on on github.com and it shows a broken link. Inspecting the source reveals there is no `src` attribute on the generated `img` tag. – quickshiftin Feb 27 '18 at 20:35
2

Update: Github has released Upload option for repositories! enter image description here There is an easy way to upload images to Github using prose.io.

But you have to add the code below to _config.yml if you want to upload images to Jekyll blog or if you are using just githb pages then you have to create a _prose.yml file in the root and add this code inside.

This works and this is how I'm updating my blog posts and adding images in it.

prose:
  rooturl: '/'
  siteurl: 'http://prose.github.io/starter/'
  relativeLinks: 'http://prose.github.io/starter/links.jsonp'
  media: 'media'
  ignore:
    - index.md
    - _config.yml
    - /_layouts
    - /_includes
  metadata:
    _posts:
      - name: "layout"
        field:
          element: "hidden"
          value: "blog"
      - name: "tags"
        field:
          element: "multiselect"
          label: "Add Tags"
          placeholder: "Choose Tags"
          options:
            - name: "Apples"
              value: "apples"
            - name: "Bananas"
              value: "bananas"
    _posts/static:
      - name: "layout"
        field:
          element: "hidden"
          value: "page"
      - name: "permalink"
        field:
          element: "text"
          label: "Permalink"
          value: ""

Now you should be able to upload images through prose.io

Read detailed Tutorial here: How to add or edit Jekyll posts online

Sharath kumar
  • 1,118
  • 13
  • 17
1

Context Yes, it is possible to upload images using Git, but not from the website. I work with Rails and Git upload a limited ammount of assets (logos, pngs, backgrounds, etc.)

Answer If you are working with a Github Page I would recommend you to store the images somewhere else. I particularly use Tumblr. I have an independent Tumblr blog where I post all my images (icons, backgrounds, client work, etc.). Tumblr doesn't compress them as much as Facebook or Google+, so is perfect for that. http://superfantasticassets.tumblr.com

rodrigotello
  • 11
  • 1
  • Thanks for your answer. However I am looking for a way to upload images without using git. Also I specifically like to store it on GitHub and not on another website. – ustroetz Mar 19 '15 at 08:55
0

If you keep your images in the Jeykll repo, they're uploaded and hosted. Just find them on GitHub in your repo, and pass the src of your img in your HTML the raw value.

Example: Image in my repo: https://github.com/kevinSuttle/kevinsuttle.github.io/blob/master/images/19698565-media_httpfarm5static_jhkva.jpg

Raw: https://raw.github.com/kevinSuttle/kevinsuttle.github.io/master/images/19698565-media_httpfarm5static_jhkva.jpg

It took me awhile to wrap my head around it also.

Kevin Suttle
  • 8,358
  • 3
  • 33
  • 37
  • 2
    Thanks Kevin for your reply, but my question is how I can get my images on GitHub without using git. I am looking for an option to this from the browser. – ustroetz Jan 01 '14 at 17:31
  • Oh, well, that isn't possible as far as I know. I'm confused as to why you would want to use GitHub and not git? – Kevin Suttle Jan 01 '14 at 19:49
  • Well I am using GitHub Pages to host the website. I am just looking for an easy way to upload images to GitHub for my friend who doesn't know how to use git. – ustroetz Jan 01 '14 at 20:17
  • You might want to look at something like http://scriptogr.am/, http://calepin.co/ or http://skrivr.com/ that uses Dropbox to host websites and publish. Tumblr even. GitHub isn't really a traditional hosting site, and is pretty much useless without git. – Kevin Suttle Jan 02 '14 at 04:51
  • 1
    Probably because it doesn't answer the question. The OP specifically mentions using the browser to upload the image to GitHub. – MEMark Mar 16 '14 at 17:03
  • My answer mentioned using the browser to upload to GitHub. Not sure what the discrepancy is. Either way, there's really not a way to do this without git. Sorry if that isn't a popular answer. – Kevin Suttle Mar 17 '14 at 03:46
0

You can also use GitHub Desktop. Then just add the repo, add images to the folder from your computer, commit and sync. This is essentially the command line git functionality but in the form of a GUI, making it easy for your friend to use.

P.S. Yes, I know this isn't actually on the Github website but it would solve your issue of giving your friend a way to upload images easily from Github.

Ethan
  • 3,410
  • 1
  • 28
  • 49