Alternative layout logic

[crystalenka]

Something that's been rattling around my head for a while; I'm writing my thoughts down here to get them organized and have a place to come back to this.

Social Magick is a cool plugin, but currently limited for a few reasons:

1. You have to start with an image template; this means there's a barrier to access for people who don't have the skill or knowledge to create something.
2. You can only have one image and one dynamic piece of text at a time; this means if you wanted to include the category, publish date, or anything else you're out of luck.
3. The options to create a layout are the best we can do with gdimage and imagick, but they are complicated at best and incomprehensible at worst.

There is an alternative method to generating dynamic OG images - have a static HTML snippet, take a screenshot of it, and cache that as the OG image. I am pretty sure this is what GitHub does. There are other services that have a similar method: https://github.com/vercel/og-image, https://htmlcsstoimage.com, I'm sure more. Point is, it's a tested method—and makes OG images much more flexible.

So, the questions are:

1. Is this avenue worth pursuing? (I think so, but I'm biased.)
2. Is it feasible? I know you can take and cache screenshots with PHP; would it be more or less performant than the current method? (And does it matter, once the image is cached?)
3. Would it be useful to people? @woluweb, you are probably the most active person in this repo as far as end users go; what do you think?
4. How would it work? I'm envisioning either a WYSIWYG editor (like tinyMCE?) with [bracket codes] that would get replaced, like [title], [author], etc.
5. Would it be an alternative to the current image generation method, or a full replacement? I am personally okay with doing a hard B/C break if it means it's more useful to people. If the latter, is it possible to migrate existing templates to close-enough HTML templates so it doesn't fully break peoples setups if they upgrade without checking?

Thoughts and constructive feedback welcome.

[woluweb]

Hi @crystalenka,,

Sorry I could not get back earlier to you. I am still catching up after the (excellent) #jd22dach :D

Those are interesting questions. I was not even aware that there were such tools to transform HTML to images.

Indeed there is a little "threshold" before using SocialMagick in the sense that you have to be able

• to create a transparent layer
• configure all the parameters to position text etc

I am not a graphic designer so I almost never use Photoshop / Affinity... but even then, thanks to the 3 pre-installed examples, I have always managed to create what I want :) Without these 3 pre-installed examples, I would never have had those ideas and been able to configure them.

To answer your question now:

• my main concern is to have something that can be full-automatic for the whole site (using cascading if you need exceptions for certain categories or articles, like it is now)
• but indeed, if it is feasible, it could be nice to have some "markup" to have some flexibility. Something like

  
  <b>{title}</b>
  {author}
  <small>{date publish_up}</small>

These are my first thoughts, but I'd be happy to have a little video-call with you one of these days in order to brainstorm together for example.