The generated thumbnails for social posts are inconsistent

[ndiego]

In working on scheduling some social posts for the Developer Blog today, I noticed that the generated thumbnails are inconsistent and are not great. Here are a few examples.

If a post does not have an image, it appears to just show a black background with the text. But then the image in the second example is not the first image of the post, so not sure how it's selecting which one to show. Finally, the last thumbnail is a completely different style.

While not having to create manual thumbnails is great, I don't believe the current autogenerated ones are showcasing the blog in the best light.

[ryelle]

These are all different ways to configure the Social Image Generator feature in Jetpack.

1. "Styling blocks" uses the "edge" template with no custom image.
2. "Beyond block styles, part 3" uses the "edge" template with this image set as the custom image.
3. "WordPress nonces" uses the "fullscreen" template with this image set as the custom image.

I believe the first is the default, the other two were configured by someone to use those images/templates.

[ndiego]

These are all different ways to configure the Social Image Generator feature in Jetpack.

Ahh I see, thanks for the clarification @ryelle

[justintadlock]

Is it possible to limit the Jetpack Social Image Generator to just one or two templates so that authors can't pick and choose between the four templates? Or is it possible to create a custom template?

It looks like this is not a feature you can test locally, and I don't have access to the Jetpack Settings on the Dev Blog to see what options might be available.

[justintadlock]

@ndiego - The social image generator feature changed recently in Jetpack. I'm guessing this has happened since you last published a post. The nonce post looks like it was originally generated with the auto-generator that was in place before.

The other ones are the default template that the post author can choose under the new system. We'll need to update the Dev Blog "to-do" list for authors to manually set an image for their posts. Otherwise, they'll look like the first social image.

[juanmaguitar]

The snapshots autogenerated for social media posts are still inconsistent (see this vs this).

@justintadlock @bph @ndiego What do you think about limiting the template for the Jetpack social feature to just one option (to just allow this version)? Would this be possible in the current workflow for authors?

[justintadlock]

@juanmaguitar - I'd love to be able to limit it to just one option if that's possible. None of us have access to the Jetpack settings screen to even see if there's a setting for that.

[juanmaguitar]

I'd love to be able to limit it to just one option if that's possible. None of us have access to the Jetpack settings screen to even see if there's a setting for that.

@ryelle could you help us to limit the template used for the generated snapshot for social media to just one option?

[ndiego]

If this limitation is not possible in the Jetpack settings, we should just put together a policy on creating social previews. For what it's worth, I think this version with the solid black background is worse than the old default.

[ryelle]

I'd love to be able to limit it to just one option if that's possible. None of us have access to the Jetpack settings screen to even see if there's a setting for that.

You're all admins on the site so it must be restricted to network superadmins 😞

In any case, it's just an on-off toggle, no settings.

These are the defaults:

If there's a way to restrict it in code, I'm happy to add a snippet to the theme, just let me know.

[ndiego]

Thanks @ryelle

[justintadlock]

I just tested this with the latest Dev Blog post: the easiest course of action is probably for authors to simply add or select a Featured Image. Doing this will use the default template. And this is only one extra step than what we have now.

[juanmaguitar]

the easiest course of action is probably for authors to simply add or select a Featured Image.

@bph @justintadlock has his step been added to any of the pre-publish or post-publish lists?

[justintadlock]

I don't think it's been in the list yet. The only people who have published have been people aware of this ticket and the need to add a featured image.

This list isn't something that's automated or anything. @bph typically adds it manually to some people's tickets. It'd probably help to have an official pre-publish checklist, but I don't know if that can be automated via GitHub.

I just added it to this ticket in case Mary isn't aware: https://github.com/WordPress/developer-blog-content/issues/83#issuecomment-1729921591

[jasmussen]

Finally got around to giving a stab to the work here. Outside of bringing back some customization options, some key values that seem worth adopting are:

• A single font, a uniform line height and uniform capitalization, for legibility
• Avoiding the use of gradient scrims, in favor of flat overlays, the former works better when editorially applied
• Adopting simpler layouts that work with or without featured images set

Here's a suggestion for what it might look like if you've applied no featured image at all:

Black and white is used to work in social media contexts that might be either dark or light mode, deferring to dark both to provide contrast to probably-default light modes, but also to not blind people that do use dark modes.

Adding featured images might look like this:

The two scrimmed versions is uniform, reducing the amount of detail that gets added to the background images, letting them stand on their own, even if overall they are more dimmed to ensure contrast.

A further exploration might be to extract the dominant color from the image, apply it as the general thumbnail color, calculate the contrast with white or black and apply either color for the text depending on needs:

Let me know what you think.

[pablinos]

Thanks @jasmussen!

A single font, a uniform line height and uniform capitalization, for legibility

We only use a single font currently, but we want to give the option to pick other fonts to match the site's theme better. The line height should also be consistent currently, but there could be issues with the font rendering because we have had another report of line height making the text not look centred. The captialisation of the text will be up to the person editing it, although we could do that via setting to automate it.

Avoiding the use of gradient scrims, in favor of flat overlays, the former works better when editorially applied

That makes sense, although it would be difficult to ensure that the text is legible when on the image, especially as we haven't got the option to change the text colour yet. Applying the gradient to the image itself may not make sense for the featured image of the post, and then we lose some of the cenvenience that automatically generating the social image gives you.

It would probably be best to have this as an option for the templates, or separate templates without the gradient, as well as the option to edit the colours of the text, and possibly the gradient.

Adopting simpler layouts that work with or without featured images set Black and white is used to work in social media contexts that might be either dark or light mode

Again, perhaps this should be an option? The default background colour, or default image when one isn't set on the individual post.

A further exploration might be to extract the dominant color from the image, apply it as the general thumbnail color, calculate the contrast with white or black and apply either color for the text depending on needs

Yes, I like that idea. It could set those colours as the defaults, and then the editor of the post can adjust them if needs be.

[jasmussen]

That makes sense, although it would be difficult to ensure that the text is legible when on the image, especially as we haven't got the option to change the text colour yet. Applying the gradient to the image itself may not make sense for the featured image of the post, and then we lose some of the cenvenience that automatically generating the social image gives you.

To clarify a bit, in these examples there's a black overlay, 70% opacity, across the whole image. That should be enough contrast for at least 3:1 (large text) contrast in most cases. In the color extracted versions, the overlay would be tinted by the dominant color of the image, also 70% opacity.

I'm not against adding options, to be clear — so long as they are good options 👍 👍

[pablinos]

To clarify a bit, in these examples there's a black overlay, 70% opacity, across the whole image

Ah I see! It's consistent across the whole image rather than a gradient.

[jasmussen]

Exactly, it's just a flat solid color that dims everything below the text.

[beafialho]

@jasmussen tiny detail, where it reads "Meus Cantinhos Especiais no Porto" should read "Os Meus Cantinhos Especiais no Porto".

[jasmussen]

Great one. Fixed in the Figma!

[ndiego]

We recently had some issues with Jetpack Social, which has been generating post thumbnails. https://github.com/WordPress/wporg-developer-blog/pull/54 has been implemented and now the raw post Featured Image will be used for Open Graph tags. This means we will need to switch to a Figma template for creating post thumbnails.

I think this is actually a great thing, and it provides us more control over how the Blog is presented on social and other sharing platforms. We can build off the work started here. I will work on getting a Figma template set up.

[pablinos]

I think it would be great if we could create a custom template for developer.wordpress.org. We can work out integrating with any customised OG tags too.

In future we want the templates to be HTML/Block based, so you would be able to customise them yourselves, but in the meantime, I think this would be a great use case to learn from. What fonts and features do you need? How often do you want to change the template? etc.