Auto-generated tutorials poster images

[corywatilo]

Problem

Our recent redesign of the Tutorials section requires artwork for each post, as we don't display the title in the feed view:

The problem is that we can't publish new tutorials without having a dependency on graphic design.

The Blog has a fallback solution: when a post doesn't have custom artwork, we have a library of stock images that can be reused.

This could work for tutorials, but in this section, the current poster images work in both light and dark mode by using art with a transparent background where the page background color can bleed through.

So how can we have both: a) custom artwork that doesn't become a blocker, b) images that work in light and dark mode?

Solution

Since we now have headless Chrome running and generating open graph images on-the-fly, we could leverage this to automatically generate tutorial posters that include custom artwork only if it exists.

The following screenshot shows all current tutorial posters using this proposed format:

How it works

1. All text is positioned in the top left, with right padding built in to leave room for graphics (if they exist)
2. Text has an inline background color with slight transparency. This makes text stand out, even if there's a graphic behind it (which doesn't happen often, but we have that case covered).
3. Text size is 96px unless the length exceed ~60(ish) characters, at which point it drops to 72px
4. Image is positioned (anchored) in the lower right corner and expands up and left from there, as far as needs to go
5. If an image doesn't exist, the poster can still be generated with just text

Examples

[smallbrownbike]

@corywatilo Love this!!

What do you think about also adding the categories to the lower right if the background doesn't exist? Basically using the idea from this design, except replacing "Next.js, Supabase, PostHog" with the categories if no background image exists.

[corywatilo]

Actually I think it makes sense as a concept to show them all the time. I don't love how this looks (need to put some more time into it) but let's definitely factor in that data showing up on all of these!

[joethreepwood]

Flyby comment: This is so cool.