Improve page preview thumbnails

[swissspidy]

Feature Description

Now that we generate preview thumbnails with html-to-image, is there any way we can fix the horrible appearance of these previews when text elements are involved?

The browser can’t display text with such a low text size.

Perhaps we could fix this by supplying width/height or canvasWidth/canvasHeight to htmlToImage or something to create a larger image and then downscale it?

https://github.com/google/web-stories-wp/blob/d6c955e7d669b576b08346fb18742eedf0cdf0f7/packages/story-editor/src/components/carousel/pagepreview/index.js#L124-L131

Alternatives Considered

Additional Context

[miina]

@swissspidy Is this happening in any browser? Are there specific steps to reproduce this? I added some pages using templates with lists and currently seeing the previews as expected:

[swissspidy]

I've only tested it in Chrome so far.

It happens when I edit some existing stories on our wp.stories.google WP instance, where we currently have v1.13.0 installed.

Examples:

It also happens when creating a story from a template:

[miina]

@swissspidy Is this something you can reproduce in the QA environment as well? E.g. I tested with the same template + Chrome in the QA environment and the preview seems to show OK. Or does it happen in the wp.stories.google instance only?

[swissspidy]

Yes, I also see it there.

[barklund]

@swissspidy Is this still an issue?

[swissspidy]

Thanks for the ping!

From what I can see now, things look much better than last year 🎉 See how the text in the thumbnails is not giant anymore:

Aside: multi-page canvas is super nice when working with a template like that.

I suppose we can close this 🎉