Dynamic Share Image for Plugins, Themes, Blocks, and Patterns

[webdevmattcrom]

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.

Currently, it doesn't look nice. Here's an example:

Github recently added dynamic social share images as the default for all repositories. This issue thread ​https://github.com/ipfs/dir-index-html/issues/51 is great reading on their approach. This is an annotated concept:

Taking that same concept I applied it to a WP Plugin from the Plugin Directory.

Here it is annotated:

I know that Automattic also recently acquired a plugin that achieves this effect, perhaps that is in the cards for making this a simple task to complete.

Naturally, more tests will have to be run for other plugins, themes, blocks, and patterns. I'm happy to test with more examples in Figma if this issue gets traction. Speaking of Figma, here's the project I worked from as a reference:
​https://www.figma.com/file/ZAggnVZ5bk0W27ihzQGdWt/Untitled?node-id=0%3A1

[mehul0810]

Nice UI suggestion, Matt.

Just to add my few cents. GitHub has curated an article that provides a more technical description of how GitHub has implemented these dynamic open-graph images and the performance challenges that faced along with how they overcame them.

​https://github.blog/2021-06-22-framework-building-open-graph-images/

[masteradhoc]

+1!

[pedromendonca]

Awesome, I've already suggested at least some metadata enhancements for social cards, a hundred tickets ago...

https://meta.trac.wordpress.org/ticket/5826

[audrasjb]

Great idea, thanks for sharing.

I'd only add that I'd love this to be automatically translated. Which seems doable given the language/locale is provided by the url.

Default (en_US): ​https://wordpress.org/plugins/my-beautiful-plugin
French (fr_FR): ​https://fr.wordpress.org/plugins/my-beautiful-plugin

:)

[jmccallweb]

+1

[webdevmattcrom]

Replying to pedromendonca:

Awesome, I've already suggested at least some metadata enhancements for social cards, a hundred tickets ago...

https://meta.trac.wordpress.org/ticket/5826

When researching this ticket I found yours first. I think they pair nicely and are not duplicates. Would love to see them both get attention.

[pedromendonca]

Replying to webdevmattcrom:

When researching this ticket I found yours first. I think they pair nicely and are not duplicates. Would love to see them both get attention.

I agree :-)

[phbernard]

Hi all,

I'm creating Resoc, an open source framework just for this. It lets you:

• Create image templates with HTML and CSS, using Mustache to inject your variables (title, author's profile pic, etc.).
• Edit those templates from your browser, with hot reloading, so that's web design as usual.
• Generate images from the command line, Netlify or other environments.

It starts here: ​https://www.npmjs.com/package/itdk

GitHub inspired many social image enthusiasts included me :) I even reproduced GitHub's social images with Resoc: ​https://blog.philippebernard.dev/automated-social-images-play-it-like-github

Could it be a component to implement all this?

[phbernard]

I have implemented a proof of concept to see the image in action with plugins. You can try any plugin with https://wordpress-plugin-directory-social-image.netlify.app/plugin-social-images/[PLUGIN SLUG].

For example, with ​https://wordpress-plugin-directory-social-image.netlify.app/plugin-social-images/give :

And with ​https://wordpress-plugin-directory-social-image.netlify.app/plugin-social-images/favicon-by-realfavicongenerator :

Code available at ​https://github.com/Resocio/wordpress-plugin-directory-social-image

This needs to be polished at every level, but at least it gives an idea of how the template works for your favorite plugins.

[dd32]

Replying to phbernard:

I'm creating Resoc, an open source framework just for this. It lets you:

...

Could it be a component to implement all this?

Hey @phbernard, Thanks for the POC implementation!

Right now, this is probably not a viable option for us, as we don't have any web-based JS runtimes deployed on WordPress.org, we'd prefer not to offload it to a 3rd party system, and we'd prefer to not generating static images (Instead, we rely upon dynamic images being cached, similar to how ​the default icon for plugins are dynamically generates images, that are cached by our CDN).

So any solution implemented here for us would probably have to be limited to PHP, and ideally, not something completely home-grown, so something like an existing WordPress.org plugin that's actively supported perhaps.

[phbernard]

Hi @dd32,

Sure, you shouldn't disrupt your backend architecture for the sake of cool social images :)

I can think of two viable options:

​GD

This is what the Social Image Generator plugin does, and it was ​acquired by JetPack.

Pros:

• Pure PHP solution. Feels like home.
• If you already use it elsewhere, it makes sense to use it again.

Cons:

• I don't know GD, but does it handle multi-line well? For example, does it strips too long text? I reminds me of ImageMagick, which is not really suited for this kind of work. Please correct me if I guess wrong.

Resoc / HTML&CSS + Chrome + Puppeteer

You can generate images from the command line right now:

# That's the PoC above. It contains the image template I wrote after @webdevmattcrom's design
git clone https://github.com/Resocio/wordpress-plugin-directory-social-image.git

# Optional - Play with the template, hot reloading...
npx itdk view wordpress-plugin-directory-social-image/resoc-templates/plugin/resoc.manifest.json

# Create an image
npx create-img wordpress-plugin-directory-social-image/resoc-templates/plugin/resoc.manifest.json -o output-image.jpg --params name="GiveWP – Donation Plugin and Fundraising Platform" description="Accept donations and begin fundraising with GiveWP, the highest rated WordPress donation plugin for online giving." logoUrl="https://ps.w.org/give/assets/icon-256x256.jpg?rev=2407987" contributors="13" locales="20" rating="4.8" installs="100000" -w 1200 -h 630

Pros:

• Design the image templates with HTML & CSS. Web design as usual.
• Calling a command line tool from PHP is natural.

Cons:

• Node is required. Depending on your environment, this might range from trivial to complicated.

[dufresnesteven]

In the meantime, would it make sense to let authors provide the social image via the "Advance view" settings?

[ndiego]

In the meantime, would it make sense to let authors provide the social image via the "Advance view" settings?

I think this is a nice interim solution. We would enforce the same policies that exist around the banner and plugin icon image.

[dd32]

I would probably suggest not adding additional images here, purely because 99.999% of plugins never use them, and it ends up as a long-term "Well, we kind of have to support the plugins that have images.." and then support a myriad of different resolutions/aspect ratio's of different platforms.

We do have the Jetpack social image plugin (which I think has merged with Jetpack itself?) installed elsewhere on WordPress.org, but the teams that requested it haven't really made use of it AFAIK.

tl;dr: I'd prefer to see automatically made images for all plugins.

[pedromendonca]

The images already exist, for those interested in using them.
No need for any additional.
The images available could be used more intelligently, according to size and format.
I've proposed in https://meta.trac.wordpress.org/ticket/5826 a better use of icons and banners for the social cards.