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.

Fixes https://meta.trac.wordpress.org/ticket/5926

Plugin pages now get a proper preview image when someone shares a link on social media. You get the title, description, icon, and a few key stats in one clean 1200x630 image.

This follows what Dion asked for on #5926: build it in PHP, keep it simple, and serve dynamic images the same way we already do with geopattern icons so the CDN can cache them. Jetpack stays installed, and on plugin pages we let it step aside for Open Graph and Twitter tags so social platforms use our image.

The layout uses a small set of constants and a straightforward stats grid that holds up across different plugin titles and descriptions. The change stays focused on the plugin directory and theme meta tags, and it passes PHPUnit and PHPCS.

## Sample output

## Test plan

• [x] PHPCS passes on new share image files
• [x] Plugin Directory PHPUnit suite passes (127 tests)
• [ ] Visit /share-image/{slug}.jpg on a plugin page and confirm JPEG renders
• [ ] View page source on a plugin page and confirm og:image points at the share image URL
• [ ] Confirm Jetpack does not output duplicate og:image tags on plugin pages

[webdevmattcrom]

@dd32 See PR on Github above. Following your directives I aimed to add minimal code and leverage as much of Jetpack and existing code as possible to achieve the right results. All tests pass. I'd love to see this one get over the finish line after some more testing, but overall I think it's a clean solution.

[dlocc]

Let me know how I can help. Always looking to push good ideas forward. It's not a "oh well, they can do this or that"... it's let's give the abilities and options to put their best foot forward.