Add social images / twitter cards for individual patterns

[carolinan]

Describe the bug When you share a link to a pattern on social media, the preview image is for the pattern directory. It would be nice if the preview was of the individual pattern.

[ryelle]

If there were screenshots of each pattern, we could use those for the shared image. That preview image could also be used for display on the pattern archive (grid) pages to improve render time, rather than rendering a bunch of iframe previews.

Past discussions of screenshotting patterns:

• 40 mentions using e2e tests to also generate screenshots, which is used in the Block Directory to show a screenshot in the block checker

• https://github.com/WordPress/pattern-directory/issues/31#issuecomment-783583914 describes how wordpress.com shows pattern previews, using mshots + a dedicated preview API endpoint

[Ren2049]

Individual patterns can be hard to make out in a small image like a card, but how about thumbnail images/legends of pattern categories?

The ones in this example are quite rough but they could also serve another purpose like categorization of patterns for a better pattern picking UX and for on user upload, where users would have to select some visual pattern category.

It's one of those things that are much better visually explained than by text. Under each thumbnail users would then find the actual patterns associated with the thumbnail.