Making WordPress.org

Opened 4 months ago

Last modified 3 months ago

#5926 new enhancement

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

Reported by: webdevmattcrom Owned by:
Milestone: Priority: normal
Component: Plugin Directory Keywords:
Cc:

Description

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:
https://i.imgur.com/m2udtUk.png

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:
https://i.imgur.com/VieMe1u.png

Taking that same concept I applied it to a WP Plugin from the Plugin Directory.
https://i.imgur.com/J4tRMdW.png

Here it is annotated:
https://i.imgur.com/ZP3oLrS.png

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

Change History (12)

#1 @mehul0810
4 months ago

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/

#3 follow-up: @pedromendonca
4 months ago

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

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

#4 @audrasjb
4 months ago

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

:)

#6 in reply to: ↑ 3 ; follow-up: @webdevmattcrom
4 months ago

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.

#7 in reply to: ↑ 6 @pedromendonca
4 months ago

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 :-)

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


3 months ago

#9 follow-up: @phbernard
3 months ago

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?

#10 @phbernard
3 months ago

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 :

https://i.imgur.com/ZMoTGLM.jpg

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

https://i.imgur.com/PEiCqUi.jpg

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.

#11 in reply to: ↑ 9 @dd32
3 months ago

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.

Last edited 3 months ago by dd32 (previous) (diff)

#12 @phbernard
3 months ago

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.
Note: See TracTickets for help on using tickets.