Drupal Association members fund grants that make connections all over the world.
Last updated July 19, 2016.
On this page:
- Skills needed
- Additional Software
- Detailed steps
- Background and reference information
- Next steps: moving beyond this task
To get help completing this task, see the Getting help completing your task page.
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.
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 software needed
Most operating systems come with built-in ways of taking screenshots.
- Mac has the Utility: Grab (Command+shift+4 and select area)
- GNU/Linux: gnome-screenshot (keyboard shortcut: PrtSc)
- Windows: Snipping Tool ( included in Windows 8, Windows 7, Windows Vista)
Some people find additional software is helpful. Popular are:
- Jing. Note the keyboard shortcut: command-shift-1 will allow pictures while the mouse is active.
- Skitch. Keyboard shortcut: Shift + CMD + 6
- Log in to Drupal.org, or create an account and then log in.
- Filter for issues with tag "Needs screenshot" (search core).
- 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.
- Scroll to the bottom of the issue and add a comment saying you are making screenshots.
- 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.)
- When taking screenshots:
- Only include the parts of the page that are relevant.
- 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 clearly without being resized.
- Include the url, or note it in the comment is useful.
- Annotate the image with arrows, boxes around parts to highlight, or words to help make the point of the image more clear.
- 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. Note that Dreditor will add the screenshot to the end of the issue summary, so you may need to move the HTML for the image tag.
- 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". Clearly indicate which images are before and after.
- Number the screenshots, by using the ordered list html tag, or manually putting in numbers, to make referring individual screenshots easier.
- Remove the "Needs screenshots" tag.
- 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.)
Background and reference information
- A past screenshot sprint group has more information on making good screenshots.
- List of supported browsers
Next steps: moving beyond this task
- Update the issue summary with the full issue summary template.
- Update or write steps to reproduce, since you have just done them.
- Do an accessibility review
- Review the patch code.
- Make screenshots for more issues in the same project or a different project, following the same steps as above.