Dashboard: Replace Template Stories with Images

[BrittanyIRL]

TBD on how we do this.

Based on the conversation here: https://github.com/google/web-stories-wp/pull/8274/files#r670841347

Templates in the dashboard are actual stories that are loading. we recently updated the my stories view to use the poster image of a story (#8274). Templates currently don't have poster image to use for this.

This ticket is to work through how we want to create image assets for templates and then implement that for existing templates and update the template creation process so that future templates have this built in.

Other questions:

• are we ok leaving template details views as is so that animations can play?

[swissspidy]

The discussion at https://github.com/google/web-stories-wp/pull/8274/files#r670841347 mentioned that the template preview images should be like poster images, without author, title, etc. in it.

But is that correct? IMO the preview should be === the cover page, ≠ the poster image. So it should include all those elements. (cc @choumx)

That would make creation of these preview images much easier as it basically just means taking a screenshot.

I am not sure we can just grab the images from Figma though as the aspect ratio might be different.

But perhaps there's another easy way to generate these?

I'll talk to the templates team to hear their thoughts.

are we ok leaving template details views as is so that animations can play?

I think it would be OK to keep this part as-is for now

One disadvantage of the animated previews is that they are not super accurate. Text is usually displayed way bigger. (Can we fix that?)

If the animated previews don't provide much value, we could consider getting rid of them and only displaying static images.

Alternative 1:

We could look into showing preview images and loading the animated previews with a small delay. So that when I am only quickly browsing through templates it's much faster.

Alternative 2:

Use small videos for the previews instead.

---

Note: Also worth thinking about doing the same for page templates in the editor. #7985 is related.

[BrittanyIRL]

Thanks, Pascal. I didn't mean to spread confusion by using the word poster image here 😅 - just that we would need some sort of likeminded substitute for templates since they do not have a poster image nor shall they. The aspect ratio in figma isn't 3:4 so we can't just pull a screenshot.

I know Marcin did some exploration to generate PNGs (re text sets that could also be used here probably) (#8117) but I'm wondering if we need a substitute in the meantime or just let it be.

If we do want to just let it be for now, perhaps we just load the first page of the story and remove the hover/focus so it never "plays".

Aesthetically, it's a little weird to me to have the my stories grid and templates be different ratios and I'd like to bring consistency sooner rather than later.

Re detail view, I would be curious if anyone would miss the animations not playing. I'll wait for Will to chime in here but my 2 cents are that since the display is inaccurate we should either cut it or fix it. That page has been super neglected for a while, so it'd be nice to give it some polish either way.

[swissspidy]

Yeah #8117 is basically what led to #7985.

Having some automation/generation would be nice eventually, but since the templates don't really change ever we could definitely create those 3:4 images (semi-)manually for now.

[BrittanyIRL]

Having some automation/generation would be nice eventually, but since the templates don't really change ever we could definitely create those 3:4 images (semi-)manually for now.

I think this would be good to knock out. I'm drawing a blank trying to figure out the best way to get the proper aspect ratio on these images.

[swissspidy]

Chatted with @divyarajmasani and we were wondering whether we could open the templates as proper stories in the browser and then take screenshots with Puppeteer.

Something like this:

1. Open WordPress in browser
2. Create a new story from a template
3. View story on the frontend
4. Resize window to 640x853
5. Somehow hide story UI
6. Take screenshot

Or even better, but not sure if possible:

1. Create a script that takes a template and runs it through getStoryMarkup to get full AMP HTML
2. Open blank page in Puppeteer and use page.setContent() to load the story in the browser

But I assume AMP complains if not run on localhost or a proper host.

Having some automation/generation would be nice eventually, but since the templates don't really change ever we could definitely create those 3:4 images (semi-)manually for now.

I think this would be good to knock out. I'm drawing a blank trying to figure out the best way to get the proper aspect ratio on these images.

Since these are also used in the carousel in the editor, could you create a new ticket for it and perhaps sync with Morten on it? He might have some ideas there.

[BrittanyIRL]

Chatted with @divyarajmasani and we were wondering whether we could open the templates as proper stories in the browser and then take screenshots with Puppeteer.

this feels alot like what @merapi was trying out with text sets: #7985 (comment)

[merapi]

2. Open blank page in Puppeteer and use page.setContent() to load the story in the browser

But I assume AMP complains if not run on localhost or a proper host.

No complaints there 👌🏻

But if we just want a screenshot of the first page and preserve the animated view on hover, we can use the same technique as in the text sets.

[swissspidy]

2. Open blank page in Puppeteer and use page.setContent() to load the story in the browser
   But I assume AMP complains if not run on localhost or a proper host.

No complaints there 👌🏻

Amazing! That makes it pretty straightforward

But if we just want a screenshot of the first page and preserve the animated view on hover, we can use the same technique as in the text sets.

I'd really love it if we could do without animations, because it means we could avoid using PreviewPage from the editor. Otherwise we really need to untangle that dependency mess there, as the dashboard shouldn't rely on the editor code directly.

[BrittanyIRL]

I'd really love it if we could do without animations, because it means we could avoid using PreviewPage from the editor. Otherwise we really need to untangle that dependency mess there, as the dashboard shouldn't rely on the editor code directly.

The 'my stories' view is now void of animations, i say we gut them from templates!

[BrittanyIRL]

Small update here, I'm going to go ahead and write this script to grab a screenshot of every template page so that we can use the same screenshots to update the page layouts.

Heads up: @barklund and @merapi incase this was on your radar.

[BrittanyIRL]

This should have been an epic 😞 Sorry @bmattb .

For transparency since it's a little too late to correct the issue structure.

1. Script to get screenshots of each template page
2. Add slug to template metadata
3. Add screenshots of each template page as png and WebP files to static site
4. Use screenshots in explore template view
5. Use screenshots in detail template view (if we don't want animation to play there, it's kinda wrong if memory serves anyways)

At this point, we can also start discussion of swapping out page templates in the editor for images. This won't help custom page templates at all but it'd cut down on the load.

[BrittanyIRL]

@csossi - you already QA'd almost this whole thing! The only bit that needs approval still is this PR: #8801

There's testing directions in the PR. Let me know if you have any questions!

[csossi]

Verified in QA