A Simple Way to Upload Images To Readmes on GitHub

UploadingPhoto

I have had a silly problem since the beginning of my Web Dev career. I alway told myself I will figure it out one day, but never took the time to actually figure this problem out!

The Problem? Posting pictures in Readme’s on Github.

StartReadme

During my time in the Flatiron school there was was so much to learn that uploading images to Github seemed like a waste of time to figure out at in the moment. Now, that I took the time to figure out how to do this I found the solution to be pretty easy. I wrote this post because most of my friends who make their own side project did not know how to upload images as well, so I figured there are way more people out there that do not know this process as well. I will now give you the simple, yet hacky, way to achieve this in a couple of clicks. Here are the steps:

  1. Click on Github Issues within the repository you would like to added the picture to.StartWithGithubCircle1

2. In the issues section of your repo create a new issue by clicking on the green New Issue button. (Do not worry you will not have to actually make a issue).

BlankGithubPages2

3 . In the Bigger text box drag the image you’d like to have in your readme.

GithubIissues3

UploadingTo GithubIssuses

This will create a markdown format of the image and it’s upload url. This is what you want!

GithubIssusesURL

Copy the text from the text box then go to your Readme.

4. Insert the copied text into your where you would like the photo in the readme. (Cool tip, you can edit and commit the readme from github instead of pulling the repo changing, committing , then pushing the repo).

HitEditCodeButton4

This is where I put my image into the readme.

Screen Shot 2016-08-23 at 11.53.54 PM

CommitOnReadme

After you are satisfied with your changes (you can always preview the readme by hitting the preview button and seeing the magical changes you made.)

After the commit your changes. You are all set enjoy your awesome image in your awesome readme:

CompletedReadme

Also if you’d like to see this repo I added the picture to here is the github location:

https://github.com/hhassan1230/AnimeChase

If you’d like to see the App in action check out Anime Chase at:

https://animechase.herokuapp.com/

Reference:

Youtube Tutorial by Dan Shahin URL: https://www.youtube.com/watch?v=nvPOUdz5PL4

 

Advertisements