When the Mediaflow app is installed, you can retrieve images, videos and documents directly from Mediaflow while working on an entry in Contentful. The file is published via Mediaflow CDN, and its metadata is included and kept up to date. Haven’t installed the app yet? Start by installing the Mediaflow app in Contentful.
Select a file
- Open the entry in Contentful.
- Click Select asset in the Mediaflow files field. Mediaflow’s file picker opens.
- Browse the folders or search for the file and select it.
The file is published to Mediaflow CDN and you receive the message Your file was successfully uploaded to the CDN. The field now contains the file’s address on Mediaflow CDN and its metadata.
[Screenshot: an empty Mediaflow field in an entry with Select asset highlighted]
You can continue working on the entry while the file is being processed. The buttons in the field become clickable again when processing is complete.
The file in the entry
The selected file is displayed as a card in the field. There you can immediately see everything you need to determine whether the file is ready to be published:
- Preview of the file, or an icon for the file type if no preview is available.
- Alt text and keywords from Mediaflow.
- Metadata status: Up to date when the field matches Mediaflow and Outdated when metadata has changed in Mediaflow since the file was selected.
- The Edit in Mediaflow link, which opens the file in Mediaflow.
Click Show all metadata to see all the metadata for the file, such as description, photographer, dimensions and your own metadata fields. With Show empty fields, you can also see fields that have not yet been filled in. Copy a value, such as the file’s CDN address, using the copy icon next to it.
[Screenshot: the card for an image with alt text, keywords, status and Edit in Mediaflow highlighted]
Alt text is missing
If an image is missing alt text, the card displays a warning. Add the alt text to the file in Mediaflow and then update the metadata in Contentful as described in the next section. The image will then have a description for screen readers everywhere it is used.
The links to Mediaflow are only displayed if the Show links to files in Mediaflow setting is enabled on the app’s configuration page. The administrator can disable it if the editors in Contentful do not have their own Mediaflow accounts.
Video
For a video, a player is displayed below the card, so you can watch the video directly in Contentful if it is embedded as an iframe. The field contains the video’s embed code instead of a file address.
Update metadata
Metadata is managed in Mediaflow. When you change, for example, the alt text or keywords for the file in Mediaflow, the card displays the status Outdated. Click the update icon Sync metadata from Mediaflow next to the status to retrieve the latest metadata from Mediaflow to the field.
If the content type has the Update Metadata for all fields button in the sidebar, you can update all Mediaflow fields in the entry at once.
Correct metadata in one place, in Mediaflow, and sync it to Contentful. This keeps alt texts and photographer names the same everywhere the file is used.
Replace or remove a file
- Click Replace to select another file from Mediaflow. The new file replaces the old one in the field.
- Click the bin Remove asset to empty the field.
The file is only removed from the field in Contentful. The original remains in Mediaflow.
See where the file is used
The Mediaflow app automatically reports to Mediaflow each time a file is added to or removed from a field. In the file’s usage history in Mediaflow, you can therefore see which space, content type and entry the file is used in, who added it and when, with a direct link to the entry in Contentful.
The usage history makes it easy to see where an image is published, for example when a licence expires or a person in the image withdraws their consent.
Mediaflow CDN
Files that you insert with the Mediaflow app are published via Mediaflow CDN. It is the CDN address that is saved in the field and that your website retrieves the file from. Therefore, Mediaflow CDN must be included in your agreement with Mediaflow for the app to work.
If Mediaflow CDN is not included in your agreement, files from Mediaflow cannot be published with the app. In that case, use Contentful’s own media management and CDN: download the file from Mediaflow, upload it under Media in Contentful and use it in a field of the Media type. The file and its metadata are then no longer linked to Mediaflow, so changes in Mediaflow are not carried over and usage is not shown in the file’s usage history.
Would you like to add Mediaflow CDN to your agreement? Contact Mediaflow.
Some file types cannot be published to Mediaflow CDN. If you select such a file, you receive a message, and the field links to the original file instead.
For developers: use the field on the website
The field is a JSON object. Images and other files have their address on Mediaflow CDN in url, while videos have their embed code in embedCode. A shortened example:
{
"id": 5555191,
"basetype": "image",
"filename": "DSCF8170.JPG",
"url": "https://eu1.cdn.mediaflow.com/1/abc/DSCF8170.JPG",
"width": 800,
"height": 533,
"altText": "Skyline of New York at dusk",
"keywords": ["new york"]
}The app’s configuration page lists all the fields in the object and what they contain. Do not change the fields via Contentful’s API, as the app may then be unable to read them.