Goal

Make screenshots showing the current behavior (without a patch) and then what it is like after a patch. This allows more people to participate in an issue and moves the issue forward.

Skills needed

Some familiarity with the module, theme, or task is helpful, but not required. You need to apply a patch to a test site, and be able to take screenshots. Some popular software for screenshots are: Jing or Skitch (the old version). Awesome screenshot is a browser plug-in that can capture a full page. Operating systems also have built in ways of doing screen captures.

Additional notes here: https://drupal.org/contributor-tasks/add-screenshots

1. Log in to Drupal.org, or create an account and then log in.
2. Filter for Drupal 8 issues with tag "Needs screenshot" (search core).
3. Find the most recent patch that was posted. (What is a patch?)You can usually find this by clicking the "latest attachment" link near the top of the issue page. Download the patch to your development machine.
4. Scroll to the bottom of the issue and add a comment saying you are making screenshots.
5. Follow the steps in Contributor task: Manually test a patch for a Drupal issue. (Follow the steps to reproduce if the issue has them. Do it without the patch, take screenshots. Then do it with the patch, take screenshots.)
6. When taking screenshots:
   • just include the parts of the page that are relevant.
   • Including the url, or noting it in the comment is useful.
   • Make the browser window narrow, and/or crop the image to under 600px wide, so that when it is embedded in a comment in an issue, it displays nicely without being resized.
   • Annotate the image with arrows, boxes around parts to highlight, or words to help make the point of the image more clear.
7. When posting screenshots in a comment in an issue:
   • While writing the comment, attach/upload the files, and embed the images into the comment with the html img tag. (Dreditor makes this much easier by adding an "embed" button next to each attached image.)
   • Label the images in the comment by using a html header tag before each screenshot with a short caption, for example "Before patch, editing term".
   • Number the screenshots, by using the ordered list html tag, or manually putting in numbers, to make referring individual screenshots easier.
   • Remove the "Needs screenshot" tag.
8. Edit the issue summary.
   • If there is no "User interface changes" section in the issue summary, add one (see sample html code in the issue summary template). Add a line under "User interface changes" noting which comment number has the most recent screenshots (the comment you just posted).
   • If there is no "Remaining Tasks" list in the issue summary, add one (see sample html code in the issue summary template). Add remaining tasks for example: update issue summary, get accessibility review, update patch, get code review, and any other remaining tasks you have found by reading through the comments and working on the issue. For the remaining tasks you add, add links to the Contributor Task documents if appropriate. (The "Next steps" section below might be helpful.)