Dynamically Generate OG Images in your Frappe sites

📋 Features

• Define DocType-wise templates for generating images
• "Live" Preview in OG Image Template
• Automatically re-generates images on document changes
• Automatically attach the generated image to a particular field in the document
• Full Inter Font Family supported in the image HTML template
• Automatically delete older image files
• Up to 1920x1080 images (for now.)
• Tests! (yup, I consider it a pretty good feature 😉)
• Update existing OG images on documents in bulk from OG Template form/API

📀 Installation

Make sure you have Frappe bench installed. You can install this app on your Frappe site by running:

bench get-app https://github.com/NagariaHussain/frappe_dynamic_og
bench --site my_site.localhost install-app frappe_dynamic_og

This app requires Node >= 16 and Frappe Version >= 14.

👩🏼‍💻 Usage

The most important DocType in this app is OG Image Template. When you want to generate OG images (well, you can use the generated image for anything you want) for a given DocType, just create a new OG Image Template document. For example, if I want to generate an OG image for the ToDo DocType, I will set the For Doctype field in the form to ToDo:

The Template HTML field takes a jinja template. The document is available in the content as doc, so, in the above template {{ doc.status }} will be replaced by the status of the ToDo document. We are also using the color field of ToDo as background color of the generated image.

Please note that when a div has more than 1 child, you have to explicitly specify display:flex; on it. Please check satori's documentation to learn what HTML element and style properties are supported.

The Result:

todo_og_image_demo.mp4

Attach To Image Field

If you want to attach the generated image to a Attach Image type field on the document, you can easily do so by checking the "Attach to Image Field?" checkbox and provide the name for the attach image field in the doctype. For instance, if I want to generate an image for the User doctype and attach the image to the Banner Image (banner_image) field, I only need to do this:

The Result:

CleanShot.2022-12-11.at.22.39.17.mp4

Preview Image

You can preview your template using the Generate Preview button in the OG Image Template doctype:

You can optionally enable Debug Mode which shows bounding boxes around your elements.

🌄 Examples

Default Template

The below is the default template set when you create a new OG Image Template document.

Template HTML:

<div style="display: flex; background-color: #fff; color: #313B44; height: 100vh; width: 100%; align-items: center; justify-content: center; flex-direction: column"> 
    <span style="font-size: 60px; font-style: semibold; color: #74808B; text-transform: uppercase;">{{ doc.doctype }}</span>
    <h1 style="font-size: 120px; font-style: bold;">{{ doc.get_title() }}</h1>
    <img style="position: absolute;height: 40px;left: 40px;top: 40px;" src="https://frappeframework.com/files/frappeframework-logo2a3e81.png" />
</div>

Output:

If you use the above template for the Web Form DocType, you will get the below image generated for a web form with title 'Job Opportunity':

More examples soon.

📍 Planned Features

• Configurable fonts via Google Fonts
• Use something like this to support style tags instead of manual inline CSS
• Only update OG image based on fields used in HTML template
• API to generate OG images dynamically
• Queueing of image generation
• Setting to optimize images

License

MIT