[wp-meta] [Making WordPress.org] #5926: Dynamic Share Image for Plugins, Themes, Blocks, and Patterns

[Making WordPress.org]

#5926: Dynamic Share Image for Plugins, Themes, Blocks, and Patterns
------------------------------+---------------------
 Reporter:  webdevmattcrom    |       Owner:  (none)
     Type:  enhancement       |      Status:  new
 Priority:  normal            |   Milestone:
Component:  Plugin Directory  |  Resolution:
 Keywords:                    |
------------------------------+---------------------

Comment (by 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:

 = [https://www.php.net/manual/en/book.image.php GD]

 This is what the Social Image Generator plugin does, and it was
 [https://jetpack.com/2021/09/08/jetpack-acquires-wordpress-plugin-social-
 image-generator/ 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.

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/5926#comment:12>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org