Install the Wagtail integration

Configure Wagtail and Mediaflow

The integration between Mediaflow and Wagtail enables publishing of images and videos stored in Mediaflow directly within Wagtail’s interface. This is ideal for ensuring web editors will always have access to GDPR-compliant files, correctly set alt texts and accessibility-optimised videos.

Settings in Mediaflow

The integration with Wagtail can be used as soon as it is installed. However, to ensure that files are accessible and can be used optimally, administrators must first configure the necessary settings in Mediaflow.

Installing Wagtail’s plugin

To enable the insertion of images and videos from Mediaflow into Wagtail, two separate plugins need to be installed—one for images and one for videos. We recommend installing both, as they are designed to work together. If video insertion is not needed, the option can be hidden via permissions in Wagtail.

The two plugins can be accessed at the following addresses:

• Images: https://pypi.org/project/mediaflowimage/

• Video: https://pypi.org/project/mediaflowvideo/

Installing Mediaflow’s image plugin

The easiest way to install the plugin is by using the package manager PIP. In your terminal, enter:

pip install mediaflowimage

Edit the website’s settings file

1. Add "mediaflowimage" to the INSTALLED_APPS array.

2. Tell Wagtail to use a custom image form

WAGTAILIMAGES_IMAGE_FORM_BASE = 'mediaflowimage.forms.MediaflowImageForm'

1. Add the API keys required for the plugin (contact Mediaflow support if you have not received them yet).

MEDIAFLOW_CLIENT_ID = <CLIENT ID>
MEDIAFLOW_CLIENT_SECRET = <CLIENT SECRET>
MEDIAFLOW_SERVER_KEY = <REFRESH TOKEN / SERVERKEY>

Custom image models

The image plugin works directly with Wagtail’s standard image model. However, if you want to map Mediaflow image metadata properties to Wagtail images, you must use a custom image model. A custom image model is also required if you wish to log file usage in Mediaflow.

The fields in your image model can be mapped to automatically populate when inserting (uploading) an image from Mediaflow. This is done by defining a mapping in your settings file as follows:

MEDIAFLOW_META_MAPPING  = {
    "photographer": "mf_photographer",
    "description": "mf_description",
    "id" : "mf_mediaflow_id"
}

If you need image usage reporting, MEDIAFLOW_META_MAPPING must include a key for the id, mapped to a field in your image model (“mf_mediaflow_id” in the example). Additionally, your image model must have a custom rendering model that adds the attribute data-mf-image-id to all rendered images.

An example of a custom image class that includes a Mediaflow ID field and custom rendering is shown below. The field names in the image model correspond to the field names defined in the MEDIAFLOW_META_MAPPING setting above:

from django.conf import settings
from django.db import models
from django.utils.functional import cached_property
from wagtail.images.models import AbstractImage, AbstractRendition, Image

class MyImage(AbstractImage):

    # Lägg till extra fält till bilden här
    # För att lägga till ett bildtextfält:
    photographer = models.CharField(max_length=255, blank=True)
    description = models.CharField(max_length=255, blank=True)
    mediaflow_id = models.IntegerField(blank=True, default=0)
    admin_form_fields = Image.admin_form_fields + (

        # Lägg sedan till fältnamnen här för att få dem att visas i formuläret:
        "description",
        "photographer",
        "mediaflow_id",
    )

class CustomRendition(AbstractRendition):

    image = models.ForeignKey(
        MyImage, on_delete=models.CASCADE, related_name="renditions"
    )

    @cached_property
    def getIdField(self):

        meta_mapping = getattr(settings, "MEDIAFLOW_META_MAPPING", "")
        for key in meta_mapping:
            if key == "id":
                return getattr(self.image, meta_mapping[key])
        return 0

    @property

    def attrs_dict(self):
        attrs = super().attrs_dict
        idField = self.getIdField

        if idField > 0:
            attrs["data-mf-image-id"] = idField
        return attrs

    class Meta:
        unique_together = (("image", "filter_spec", "focal_point_key"),)

The easiest way to install the plugin is by using the package manager PIP. In your terminal, enter:

pip install mediaflowvideo

Edit the websites settings file

Edit the Settings File ([mysite]/settings/base.py):

1. Add “mediaflowvideo” to the INSTALLED_APPS list (near the beginning of the file).

2. Add “mf-video” to the feature list for the Draftail Rich Text Editor.

WAGTAILADMIN_RICH_TEXT_EDITORS = {
	'default': {
		'WIDGET': 'wagtail.admin.rich_text.DraftailRichTextArea',
		'OPTIONS': {
			'features': ['mf-video' .....]
		}
	}
}

3. Add the API keys required for the plugin (contact Mediaflow support if you have not received them yet).

MEDIAFLOW_CLIENT_ID = <CLIENT ID>
MEDIAFLOW_CLIENT_SECRET = <CLIENT SECRET>
MEDIAFLOW_SERVER_KEY = <REFRESH TOKEN / SERVERKEY>