Creating a Showcase site screenshot

Read this issue for context.

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

I think the best and most consistent way is to use Google Chrome Developer tools:

• Open your Google Chrome Web browser and toggle the developer tools.
  • Right click
  • Select "Inspect" from the menu
• Toggle Responsive view
• Set Dimensions to
  • 1440 x 810
• Take a screenshot using Developer Tools built in screenshot service
• Mac: Command + Shift + P
• Type "Capture screenshot"
• Selected it in the menu, hit enter
• The file will be saved to your downloads folder.
• The saved file will be .png, however we want to convert it to jpg. That will make sure JetPack serves optimized webp versions.

Demo Video: https://d.pr/i/SgJPo8

How to associate screenshot to Post

• Upload the image to your media library
• Copy img URL.
• View Post
• Add custom field screenshot, paste img URL.
• Save Post

Note: We are using Jetpack so upload a jpeg/png. Jetpack will convert those to webp on the fly.

Example