- 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
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.
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 specifydisplay: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
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
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.
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.
- 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