chrisryana / pasteImage.md
В этом кратком руководстве вы узнаете, как создать отдельную ветку в своем репозитории для размещения скриншотов и демонстрационных картинок для использования в файле Readme.md master-ветки.
1. Клонируйте репозиторий
Чтобы предотвратить любую потерю работы, лучше всего клонировать репозиторий в отдельном месте для выполнения этой задачи.
2. Создайте новую ветку
Создайте новую ветку в репозитории, используя в терминале команду git checkout —orphan assets
Это создаст и переключит вас на новую ветку под названием «assets». Флаг —orphan создает новую ветку пустой, без привязки к родительской ветке. В ней не будет коммитов. Однако она сохранит рабочее дерево.
3. Удалите все файлы из дерева
git rm -rf .
Важно: обязательно убедитесь что находитесь в нужной ветке «assets» с помощью команды git branch
Обратите внимание на точку в конце. Это часть команды, означающая, что нужно удалить все файлы.
4. Добавьте свои изображения и передайте изменения
Переместите в папку проекта все необходимые файлы и введите в терминал команду git add . . Теперь можно закоммитить изменения: git commit -m «Добавлены демонстрации» .
5. Отправьте изменения в удаленный репозиторий
git push origin assets
6. Используйте изображения в Readme
Теперь вы можете использовать ссылку  в вашем readme.
- alt text – любой текст описывающий изображение. Лучше указать, тк если указана неверная ссылка, будет легко обнаружить это.
- username – логин на гитхаб
- projectname – название репозитория
- commit – уникальный hash коммита. Чтобы его узнать нужно ввести в терминал команду git log и скопировать безобразно длинную строку из букв и цифр.
- img.png – имя файла изображения
7. Удалите ветку
Проверьте, что все изображения корректно отображаются в Readme. Если изображения нет, но и иконка поврежденного файла не отображается — все нормально. Значит файл достаточно большой и еще не загрузился. У меня такое было и занимало до 5-7 минут.
Теперь можно удалить ветку git push origin —delete assets
Markdown — Github Image
This tutorial covers adding images or screenshots to the GitHub markdown README.md file and resizing images using syntax HTML image tag and examples..
Github has a README.md for every project that contains documentation about a repository.
README.md contains plain text with markdown syntax.
Sometimes, You want to add images to the README.md file. It includes a screenshot of images.
How to add screenshot image to README.md on GitHub?
README.md is a markdown file written with markdown syntax.
So adding an image to a markdown can be done in multiple ways.
- use markdown image syntax.
The below syntax contains ![]() with alt text wrapped in square brackets[] and url and title are inside brackets ()`.
Alt-text — is an image alt attribute text url- It contains a relative url or complete HTTP url
Relative URL example For example, if your image is in your repository, you can give url relative to your repository. If the image is located in repository->assets->employee.png url, Then the url is included as seen below
raw=true to an image does not process during markdown to HTML conversion and is displayed as these.
3 Ways to Add an Image to GitHub README
Images often come in handy alongside documentation. Here are a few methods for adding them to your README and other markdown files.
Images can be a great way to enhance your documentation in README files or other markdown documentation. While there is a standard way to add an image in markdown, the nuance is in the image's source. Here are three methods for adding images to markdown files in a GitHub repository.
Markdown Syntax
The original documentation specifies that images should be written like so:
HTML code is also valid within most markdown renderers, including GitHub's flavor. That means you could also render an the image above like this:
This is a great option if you want to add a little custom styling to your image. For example, if you want to control the size or alignment of the image, you might do something like this:
Method #1: Local File
The first method is to commit the image directly to your GitHub repository. When you do that, you can use a path to that file for the src , which should be relative from the markdown file.
In other words, if you place an image file in the root your project as my-image.jpg , you could then render the image in your projects main README.md file like this ( title omitted for simplicity):
Let's say the image file was instead in an images directory. Then your code in the project's main README file would look like this:
Now, let's say that you have another README file in your src directory, but your image is still in the images directory. Then your relative path looks like this:
This approach is a quick and easy option, as long as you don't have too many images to manage. If you end up using a lot of images, I'd consider another route .
Method #2: Remote File
Another option is to use some external file hosting service to provide your image, such as S3 or Dropbox. In this case, you could get the direct and full URL to the image and then use that.
Method #3: Uploaded File
Lastly, you could use GitHub to host the image for you. This one is a little goofy, but it totally works!
The trick is to add them to some comment — an issue, pull request or discussion — and then grab the resulting URL.
You can drag and drop the image from your computer to a comment field in GitHub. Wait for the file to upload and then the URL to the image is right there! You don't even have to submit the issue if you don't want to (although that may limit the image's lifespan).
Unlike the other two options, I see two issues with this approach:
- On its own, it becomes difficult to know the source of the image. Maybe that's not a big deal, or maybe you have a way to streamline it — e.g. all your images go into a single "Images" issue that stays open.
- The purpose of images in comments is technically to serve the comment. It's possible GitHub changes these URLs without notifying you.
Inspiration & Resources
This post was originally inspired by this tweet from @DavidDarnes:
Haha nice! FYI if you upload those readme images in a new GitHub comment and it'll give you the image paths back to put them in your readme, then you won't have them cluttering the repo 😶
— Dave 🧱 (@DavidDarnes) January 18, 2021
I ended up being more comprehensive than just this singular suggestion, which came to be more in-line with this StackOverflow question.
How to add images to GitHub readme
I remember when I first started learning to code and had to upload my first project to Github, I wanted to add images or screenshots of my app to the readme section. I kept on searching the internet, and I actually found a way that was suggested by some developers to store your images in your git repo and then refer to them, but this option would take a lot of steps for every screenshot image and was kind of overwhelming for me. That’s why I decided to write this article to show you how to add images to your GitHub readme.
Use Imgur as an External Free Cloud Hosting Website
I have found this way to add images to the Github readme. First, I would upload the screenshot image to my account on Imgur website. For those of you who don’t know Imgur:
Imgur is an American online image sharing community and image host. The service has been popular with hosting viral images and memes, particularly those posted on Reddit.
So here is Imgur link if you want to check it out:
Imgur
Discover the magic of the internet at Imgur, a community powered entertainment destination. Lift your spirits with…
You go to Imgur and create an account. Then after signing up, you will be redirected to a page like this shown below.
Then right click on your account image and you’ll be presented with the shown menu.
Click on images and you’ll be redirected to the following page where you can add your own images. Click on “add images” and then browse your image from your device or paste the image url.
Now all the images you have uploaded will appear in this section.
Click on the image you’ve just uploaded and copy the “Direct link”, the second link with “.png” at the end.
Use Markdown Syntax to add the image url to the GitHub readme
Now if you want to make use of this copied direct link from imgur and show an image in the GitHub readme file, you will need to use the Markdown syntax. For those of you who don’t know what is Markdown. Markdown is a plain text formatting syntax for writers. It allows you to quickly write structured content for the web, and have it seamlessly converted to clean, structured HTML.
If you want to learn more about Markdown syntax and all the different types of content that you can include in the Github readme using this syntax including headings, quotes, lists, images, etc, then check out this great blog article at ghost.
What you have to do now is go back to Github, open the readme section, and paste the following markdown in your post including the url you’ve just copied. Make sure you specify the width like giving it a value of 300 or so, or the screenshot image will be huge!
And Voila here is the readme file with the screenshots’ images added:
How to add three images to GitHub readme in one row?
If you want to include more than one screenshot image in the same row, you just write the markdown in your readme file as following:
This will add three images into one row as shown below:
And this is how we can easily add images to the Github readme file. If you want to know how to add gifs to Github readme, then you can check out this article.