Opened 2 weeks ago
Last modified 18 hours ago
#5926 new enhancement
Dynamic Share Image for Plugins, Themes, Blocks, and Patterns
Reported by: |
|
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:
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.
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)
#3
follow-up:
↓ 6
@
2 weeks ago
Awesome, I've already suggested at least some metadata enhancements for social cards, a hundred tickets ago...
#4
@
2 weeks 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:
↓ 7
@
2 weeks ago
Replying to pedromendonca:
Awesome, I've already suggested at least some metadata enhancements for social cards, a hundred tickets ago...
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
@
2 weeks 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.
6 days ago
#9
follow-up:
↓ 11
@
5 days 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
@
43 hours 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 :
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
@
27 hours 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.
#12
@
18 hours 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.
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/