Allow full page screenshots (arbitrary height)

ryelle commented 8 months ago

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 https://github.com/Automattic/mShots/pull/15, which is basically what I'm looking for (though I would still want to set the viewport width).

Related to https://github.com/Automattic/mShots/issues/16, but that was closed without a solution as far as I can tell.

simison commented 8 months ago

I think this got solved in https://github.com/Automattic/mShots/pull/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 commented 8 months ago

@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:

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!

Automattic / mShots

Allow full page screenshots (arbitrary height) #88