Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Storing Images and Demos in your Repo

Storing Images and Demos in your Repo

In this quick walkthough you'll learn how to create a separate branch in your repo to house your screenshots and demo gifs for use in your master's readme.

How to

1. Clone a fresh copy of your repo

In order to prevent any loss of work it is best to clone the repo in a separate location to complete this task.

2. Create a new branch

Create a new branch in your repo by using git checkout --orphan assets

This will create and switch you to a new branch called "assets". The --orphan flag creates a new branch but without any prior commits. However it does still keep the working tree and index.

3. Remove files from the working tree

git rm -rf .

THIS WILL DELETE ALL FILES THAT THE WORKING TREE RECOGNIZES Any files that were not added to the tree will remain left behind in the folder.

We remove all files from the working tree since we do not want anything but our screenshots and images in this branch.

You can also check what branch you are on anytime by using git branch. The branch with the * next to it is the current branch.

4. Add your images and screenshots and commit the change

git add screenshot.png demo.gif logo.png

git commit -m "Added Assets"

4. Finally push your changes

git push origin assets

Use the images in your README

You can now use ![Demo Animation](../assets/demo.gif?raw=true) in your README to have the gif display on your master's readme.

@henngelm
Copy link

henngelm commented Sep 4, 2019

Perfect. thx!.

@fischgeek
Copy link

fischgeek commented Nov 14, 2019

Love that the assets are still accessible in a completely different branch! Thank you!

@rsalmei
Copy link

rsalmei commented Mar 12, 2020

Afterwards, when we want to update those images, will the old ones continue to use up space in the repo? I'm worried with the local .git becoming too bloated...

@johnbent
Copy link

johnbent commented May 11, 2020

@joncardasis, what is the advantage of putting images into a separate branch? It seems like it just complicates the workflow whereas it would be equally easy to just have an images directory in the master branch. No?

@nelsyeung
Copy link

nelsyeung commented Jun 13, 2020

@joncardasis, what is the advantage of putting images into a separate branch? It seems like it just complicates the workflow whereas it would be equally easy to just have an images directory in the master branch. No?

I quite like this new branch method because, with each image update, you can choose to wipe the previous images by wiping the branch, so that it minimises the size of your repository. It also has the advantage of not cluttering your master branch with demo images.

@mohanraj-r
Copy link

mohanraj-r commented Jul 31, 2020

This is helpful, thanks.
Also found this related post sharing the same steps How to Store Images for Use in README.md on GitHub

@let4be
Copy link

let4be commented Jun 23, 2021

So what is the benefit of doing this say vs commiting them directly to your master and keeping them versioned along with your code?...
Exactly what problem does this approach solve?

@CarlosMurillo2897
Copy link

CarlosMurillo2897 commented Jul 7, 2021

Awesome, really nice post. Pretty easy.

@foundObjects
Copy link

foundObjects commented Aug 9, 2021

So what is the benefit of doing this say vs commiting them directly to your master and keeping them versioned along with your code?...
Exactly what problem does this approach solve?

This keeps unrelated resources from mixing in with your code, it's not strictly needed but it is a lot tidier to just tuck them away in a separate branch.

@hansake
Copy link

hansake commented Dec 25, 2021

Works really good. Used ffmpeg to convert .mp4 file from the camera to a .gif file.
https://github.com/hansake/My_PiDP-11

@RumitPatel
Copy link

RumitPatel commented Mar 25, 2022

This is very helpful, thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment