Allow full page screenshots (arbitrary height)

[ryelle]

We use mshots on the WordPress.org Pattern Directory to render small pattern previews, but right now they're all fixed to the same height, so they're either cut off at the bottom (first two in screenshot), or have extra whitespace above/below (last). It would be nice if I could pass in a param, like ?fullpage=1, and the image returned would be the height of the page.

@simison had a PR proof of concept here #15, which is basically what I'm looking for (though I would still want to set the viewport width).

Related to #16, but that was closed without a solution as far as I can tell.

[simison]

I think this got solved in #31 thanks to @alshakero

Note that it was important to allow "scrolling" tall screenshots, otherwise anything with 100vh would render full height; if I recall right the PR solved that but do some testing.

mShots uses Puppeteer, so any full-page heights are limited to its capabilities.

[ryelle]

@simison Ah, okay I misunderstood what screen_height was and how it needed to be used with vph (tracking down https://github.com/Automattic/wp-calypso/pull/52541/files helped).

So I can use https://s0.wp.com/mshots/v1/[my url]?vpw=1200&vph=300&screen_height=3600, which if I understand now, should take 300px tall screenshots until a max of 3600. That's working as I want in these examples:

• https://s0.wp.com/mshots/v1/https%3A%2F%2Fwordpress.org%2Fpatterns%2Fpattern%2Fbold-sale-banner-with-geometric-background%2Fview%2F?vpw=1200&vph=200&screen_height=3600 — 1200 x 528
• https://s0.wp.com/mshots/v1/https%3A%2F%2Fwordpress.org%2Fpatterns%2Fpattern%2Fheading-paragraph-button-with-two-images%2Fview%2F?vpw=1200&vph=200&screen_height=3600 — 1200 x 1433

I'm sure most people wouldn't want a 300 tall viewport, but I want to make sure the patterns don't have extra whitespace, and some are short.

In any case, thanks for pointing me in the right direction!