Skip to main content

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 in INSTALLED_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.

The injected new tab

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:

Basic image example

A more advanced example with additional background and page logo fields might look like this:

Full image example

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!

https://candylabs-production.fra1.cdn.digitaloceanspaces.com/website/media/documents/standard_logo_black.svg

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

wagtail-opengraph-image-generator-2.0.tar.gz (366.1 kB view details)

Uploaded Source

Built Distribution

wagtail_opengraph_image_generator-2.0-py3-none-any.whl (369.2 kB view details)

Uploaded Python 3

File details

Details for the file wagtail-opengraph-image-generator-2.0.tar.gz.

File metadata

File hashes

Hashes for wagtail-opengraph-image-generator-2.0.tar.gz
Algorithm Hash digest
SHA256 91721ff4d0a6a98bf6450e1423a2ba63df55d4db8701b001c3c9d250d06cf58d
MD5 b92941f8564e7af99d04eadc20057a95
BLAKE2b-256 7d0dd217dff1b74f5dd1fcae9a1a738e0834f3cde21825e735a5492f56714b22

See more details on using hashes here.

File details

Details for the file wagtail_opengraph_image_generator-2.0-py3-none-any.whl.

File metadata

File hashes

Hashes for wagtail_opengraph_image_generator-2.0-py3-none-any.whl
Algorithm Hash digest
SHA256 50b016b3e8bd14bf3e233cc89020eb2a729bbcd65b6ff40a786690c31c823d65
MD5 0ffd310f70a3b2e56b2e83f4d51e8383
BLAKE2b-256 e955c503d69ab3a76fcfba9d504f6862ec1fa45fb6a8c9947f14985aa357cc4f

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page