Wagtail addon to assist in creating Open Graph images for your pages
Project description
wagtail-opengraph-image-generator
Wagtail Open Graph Image Generator will assist you in automatically creating Open Graph images for your pages.
There are a handful of configuration options to popuplate images with your page's content. Besides the title, there are options to provide a static company logo, subtitle, background image and page logo in the SVG format. While the resulting image will be a little bit opinionated, the defaults should work just fine in most cases.
The final image will be saved in the PNG format in a configurable Wagtail collection. It then can be used in your templates and code.
Features
- Automatic creation of Open Graph protocol compatible images
- Live preview and configuration in a seperate tab in the Edit and Create views
- Several dynamic fields that can be configured to supply content for your generated image
Requirements
- Python 3.7+
- Wagtail 4
- Django 3.0+
wagtail.contrib.settings
inINSTALLED_APPS
Other versions might work but have not been tested.
Installation
Install with pip:
pip install wagtail-opengraph-image-generator
Add wagtail_opengraph_image_generator
to your INSTALLED_APPS
Finally, apply the migrations with python manage.py migrate
Usage
Once the addon is installed, you will notice a new tab in your edit/create view.
This new panel will allow you to preview your new Open Graph image before you save it. Depending on your exact configuration this panel will provide slightly different options and customizations.
Embedding in your template
Accessing the generated image is done with an image tag. Make sure to load it in your template and call get_existing_og_image [page-object]
to save the image in a variable. You can then use it as any other Wagtail image.
{% load wagtail_opengraph_image_generator_tags %}
{% get_existing_og_image self as og_image %}
{% if og_image %}
{% image og_image original as og_image %}
<meta property="og:image" content="{{ self.get_site.root_url }}{{ og_image.url }}">
{% endif %}
Examples
A basic example with a default background image, company logo and subtitle might look like this:
A more advanced example with additional background and page logo fields might look like this:
Documentation
For more information on getting started, an overview of all available settings and release notes, please see our documentation on Read the Docs.
Support
Feel free to open issues and, even better, pull requests!
The development of this plugin is supported by candylabs GmbH
If you need commerical support developing a Wagtail site, Django application, MVP or digital platform, we'd love to hear from you at info@candylabs.de!
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for wagtail-opengraph-image-generator-2.0.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | 91721ff4d0a6a98bf6450e1423a2ba63df55d4db8701b001c3c9d250d06cf58d |
|
MD5 | b92941f8564e7af99d04eadc20057a95 |
|
BLAKE2b-256 | 7d0dd217dff1b74f5dd1fcae9a1a738e0834f3cde21825e735a5492f56714b22 |
Hashes for wagtail_opengraph_image_generator-2.0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 50b016b3e8bd14bf3e233cc89020eb2a729bbcd65b6ff40a786690c31c823d65 |
|
MD5 | 0ffd310f70a3b2e56b2e83f4d51e8383 |
|
BLAKE2b-256 | e955c503d69ab3a76fcfba9d504f6862ec1fa45fb6a8c9947f14985aa357cc4f |