Dynamic Social Images for Plugins, Themes, and Patterns? Yes, Please

Things move fast on social media. You get mere seconds to impress those who happen upon your posts promoting your latest project. You must also pack a lot of information into a small window that would potentially draw in an array of different users.

WordPress has not been doing any favors for plugin and theme authors who share links to their directory-hosted extensions. Social cards for them include a simple image, title, and description. Instead, WordPress.org could dynamically generate the social images by populating them with other data, such as ratings, active installs, and more.

That is just what GiveWP co-founder Matt Cromwell proposed today in a new ticket. “When plugin/theme/block/pattern authors want to share their work on social platforms, they want to link directly to their product on .org and have it look nice,” he said.

He shared an image of an earlier tweet from the GiveWP Twitter account today:

The goal is to piggyback off the concept that GitHub put in motion over the summer. In June, the platform launched a new framework for building Open Graph images. The system generates an on-the-fly image with data specific to a repository, issue, pull request, and more.

In the context of WordPress plugins, themes, and patterns, there are bits of information that could help highlight the projects:

  • Contributors (plugins only)
  • Locales/Translations
  • Rating
  • Installs

This data is readily available on WordPress.org. All that would really be required is the code for generating the social images with it.

Cromwell shared a mockup of what this might look like for a plugin, which is also available through the Figma project he created:

Mockup of a dynamically-generated social image for a WordPress plugin, including contributor, locale, rating, and install data.
Mockup for a plugin’s generated social image.

He also has an annotated version:

An annotated version of a mockup of a dynamically-generated social image for a WordPress plugin, including contributor, locale, rating, and install data.
Annotated version of social image mockup.

Thus far, the feedback has been positive in the ticket. This is probably one of those easy wins that most people in the community could get behind.

“I’d only add that I’d love this to be automatically translated,” said Jean-Baptiste Audras in the ticket. “Which seems doable given the language/locale is provided by the URL.”

The idea is to use the translated text for the generated image if the shared link is from one of the many locale-specific subdomains on WordPress.org. So, a Spanish URL would use the existing Spanish translation.

We could even apply this concept to other pages on WordPress.org, particularly those that might not have an image associated with them. This is a treatment that Courtney Engle Robertson, Web Design and Developer Advocate at GoDaddy, requested on Cromwell’s Facebook post about the idea. Workshops on the Learn section of the site, for example, could display the number of languages or length, so potential visitors have more information before clicking a link.

The best thing about this idea is that the WordPress community likely already has the foundational code to make this happen. Automattic purchased Daniel Post’s Social Image Generator plugin last month. The plan is to bundle the feature in Jetpack as part of its social media tools.

Auto-generated decorative image for the post, showcasing the Social Image Generator output.
Generated image using dynamic data.

With a bit of custom code, it is not a stretch to think we could have better social images in short order. The plugin was already built with customization in mind when I reviewed it in June.

2

2 responses to “Dynamic Social Images for Plugins, Themes, and Patterns? Yes, Please”

  1. This would be a great feature! But I would like it even more if the plugin directory would allow you to upload a correctly-sized social media preview image.

    Right now social shares use the ”banner” image which is too wide for both Facebook and Twitter, which use around a 16/9 image. This means content is cropped from the left and right of thr image.

  2. I’m working on an open source ecosystem for this very purpose, called Resoc. It comes with an image template format, based on HTML, CSS and Mustache, an editor to design those templates, and image generators for a range of environments.

    I didn’t notice Matt’s ticket 😅, so thank you Justin for letting me know!

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.