DEV Community

Matthew McGarvey
Matthew McGarvey

Posted on

5 2

GitHub Pull Requests with Screenshots Tip

When you're making a pull request in GitHub and want to include screenshots in the description, you might be tempted to just throw the screenshots in with headings. I urge you, though, not to do that! Those screenshots take up a lot of room and there is a better way!

Dropdowns

Dropdowns are truly the better way to add images to pull requests. By default they can be ignored and can be expanded if you want to look at them.

Here's a picture of a pull request description without using dropdowns. Notice how much room is taken up. I had to zoom out to 60% just to get it all on my screen!
PR description without dropdowns

Now here's a picture using dropdowns. It's so much simpler.

PR description with dropdowns

Syntax

I used to always google "github markdown dropdown" and used this link.

They are created using markdown like this:

<details>
<summary>How do I dropdown?</summary>
<br>
This is how you dropdown.
</details>
Enter fullscreen mode Exit fullscreen mode

Saved Replies

Just so that you and I don't have to remember this article or that GitHub gist in the future, you can make it easy by creating a saved reply. Those are accessed in the bar above the text area when creating a pull request description.

saved replies button

You can create a new saved reply through that button and make a dropdown saved reply. That's going to save me a bunch of time!

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay