Skip to content

Creating a Showcase site screenshot

Jump to bottom
Kelly Dwan edited this page Sep 18, 2023 · 8 revisions

How it works

The theme uses live snapshots provided by mShots as the base. However, the service sometimes snaps not-so-great photos. Therefore, we want to save our own snapshots and link them to the post when necessary.

How to take screenshots

The best and most consistent way is to use Google Chrome Developer tools:

  • Open Google Chrome or Firefox and toggle the developer tools.

    • Right click
    • Select "Inspect" from the menu

  • Toggle Responsive view

  • Ensure the "DPR" is set to 2

  • If you're taking a desktop-size screenshot:

    • Set Dimensions to 1920 x 1080.

  • If you're taking a mobile-size screenshot:

    • Set Dimensions to 375 x 667.

  • Take a screenshot

    • Chrome: Click the vertical dots menu on the top right, select "Capture screenshot"

    • Firefox: Click the camera in the top right, next to the cog icon

  • The file will be saved to your Downloads (Chrome) or Pictures (Firefox) folder.

  • If you can, optimize the image with something like ImageOptim.

Here's a demo video showing how to use the Chrome web-inspector: https://d.pr/i/SgJPo8

Best practices

The goal of taking manual screenshots is to ensure better quality screenshots than those that can be provided by mShots. In that light, the best quality screenshots have these properties:

  • Ideally taken on a Mac, since font rendering is very nice there. But this is not a hard requirement, and please use your best judgement looking at the result before submitting: if it's high quality, that's fine.
  • Dismiss all cookie notices.
  • Dismiss any Cloudflare firewalls or captchas.
  • Dismiss any newsletter dialogs.
  • If there are advertisements on the website, see if you can dismiss them (Google Ads allow dismissal). If they can't be dismissed, just ensure that the ad that gets baked into the screenshot is as tasteful as it can be, you might need to reload the page if an improper one is shown.

In general, use common sense to evaluate the end result, and if your setup doesn't allow a great result, perhaps defer to the mShots default, or ask for assistance.

How to associate the screenshots to a site

When editing a site, use the "Screenshots" panel in the document sidebar. This works just like the Featured Image uploader. Upload your Desktop screenshot to the desktop field, and the mobile screenshot to the mobile field.

By default, if an image is uploaded, the page header for that site will use a selected color from the image for the background color. Change that by disabling the toggle and entering in a custom hex color.

Clone this wiki locally