Derivative Fields, or, Meta/social sharable Image Generators from CMS

Background: The website I run has a CMS collection. For each page in the collection, the hero image has a transparent icon in the hero image. The background color changes to reflect the item's rating.

However, for the meta-image/social sharable image, I need to regenerate the image from scratch: setting it against a background, sizing and aligning it, and adding our logo to the bottom right.

While my current solution is to use a custom Python code to generate images for each new entry, I suspect that a feature like this should be easy for Webflow to implement and offer.

Even though the main use case I'm imagining is for meta images, I'm calling this idea derivative fields, or child fields, in case additional use cases are possible.

Basic Idea: In a CMS, you could take an existing image field and create a derivative, or child, image.

The child image is a template, composed of the parent image and additional assets or attributes.

You can set a background from, say, other color fields in the CMS. You could choose if, or where, the logo would be displayed on the child image.

Importantly, this child image would be applied for the entire CMS. It would change dynamically for each entry in that collection. The image would occupy the same location(s) as specified. The logo, any type, and so forth, would appear in all the child images.

These derivative/child images could also be used like any other image on the site itself. Users also wouldn't be locked in to using child images if they want to use another image.

  • John Fallot
  • May 10 2023