Media Types

Changelog

In the last few months we have substantially extended the media library. To show you what changed in what release, we provide you a changelog.

Add Image Support

Media Types describe the content you can manage in the Media Library. You can configure the metadata you want to manage per Media Type by using the same metadata schema as on Content-Types. The Media Library will provide forms to edit this data. If no Media Type config is provided it falls back to a default config where title, caption, source and description will be taken as metadata.

• Add image support with the new type mediaImage.
• You can only configure 1 mediaType and it has to have the handle image.
• Only one type is supported: mediaImage

Add Video Support

• Add video support with the new type mediaVideo.
• Multiple Media Types of type mediaImage are supported, but at least one Media Type must have the handle image

Add Configurability of Media Library Index / Multiple Videos

• Includes index on config
• You can configure which metadata should be indexed on the media index. The metadata plugin must support the media index. Set in config property index:true
• upstream plugins which support media index
  • li-text
  • li-boolean
  • li-enum
  • li-integer
  • li-numeric-list
  • li-string-list
  • li-google-vision
• Multiple Media Types of type mediaVideo are supported, but at least one Media Type must have the handle video

Add File Support

• Add file support with the new type mediaFile

Add Dashboard Card Config Support

• The card (UI Component or configured dashboard card) to be used for a mediaType in a Media Library Dashboard can be configured

Example

mediaTypes: [{
  handle: 'image', // the handle is free, but one mediaImage must have the handle 'image'
  type: 'mediaImage',
  info: {
    label: 'Image',
    description: 'Media type for images'
  }
  metadata: [
    {
      handle: 'title',
      type: 'li-text',
      config: {
        required: true,
        requiredErrorMessage: 'Please provide a title',
        index: true
      }
    },
    {
      handle: 'caption',
      type: 'li-text'
    },
    {
      handle: 'source',
      type: 'li-text',
      config: {
        required: true,
        requiredErrorMessage: 'Please provide a source',
        index: true
      }
    },
    {
      handle: 'note',
      type: 'li-text'
    },
    {
      handle: 'validDateRange',
      type: 'li-datetime-validity'
    },
    {
      handle: 'googleVision',
      type: 'li-google-vision',
      config: {
        index: true
      }
    }
  ],
  exifExtraction: {
    mappings: [
      {field: 'Title', metadataPropertyName: 'title'},
      {field: 'Source', metadataPropertyName: 'source'},
      {field: 'Description', metadataPropertyName: 'caption'}
    ]
  },
  hugoExtraction: {
    mappings: [
      {field: 'title', metadataPropertyName: 'title'},
      {field: 'caption', metadataPropertyName: 'caption'},
      {field: 'source', metadataPropertyName: 'source'}
    ]
  },
  mediaSources: [
    {
      handle: 'example',
      // the plugin name must match with the registered plugin(-handle)
      plugin: 'examplePlugin',
      info: {
        label: 'Example'
      },
      // config will be passed to the plugin
     config: {
       accessKey: '****'
     }
    }
  ],
  editor: {
    dashboard: { // the dashboard opened from the Document Editor
      displayFilters: [
        {filterName: 'liDateTimeRange'}
      ],
      card: {
        name: 'liMediaLibraryCard' // this is the default, can be changed to another card
      }
    },
    managementDashboard: { // the dashboard opened from the Main Navigation
      displayFilters: [
        {filterName: 'liDateTimeRange'}
      ]
    }
  }
}, {
  handle: 'video', // one mediaVideo must have the handle 'video', additional ones can be named as you like
  type: 'mediaVideo',
  metadata: [
    {
      handle: 'title',
      type: 'li-text',
      config: {
        required: true,
        requiredErrorMessage: 'Please provide a title',
        maxLength: 200
      }
    }
  ]
}, {
  handle: 'file', // one mediaFile must have the handle 'file', additional ones can be named as you like
  type: 'mediaFile',
  metadata: [
    {
      handle: 'title',
      type: 'li-text',
      config: {
        required: true,
        requiredErrorMessage: 'Please provide a title',
        maxLength: 200
      }
    }
  ]
}]

Metadata

The metadata follows the rules that also apply to document metadata defined on a content-type. All the same metadata plugins are available. Different from the document metadata, media metadata does not have UI support as of now.

Exif Extraction

This feature is only supported for the mediaImage mediaType.

Whenever in image file is stored in the Media Library, we can extract the IPTC data from the image file and store it in the metadata. You can configure this behavior with the mappings defined in exifExtraction.

We follow https://www.iptc.org/std/photometadata/specification/IPTC-PhotoMetadata and provide a mapping of the field names (and some aliases) to the actual value in IMM or XMP, following the standard with best effort. If the same field is available in IIM and XMP defined fields, we prefer the one in XMP. And example for this is the field Creator (https://www.iptc.org/std/photometadata/specification/IPTC-PhotoMetadata#creator). It was first defined in IIM as 2:80 By-line. Later it was renamed in XMP to dc:creator. Both fields have effectively the same meaning: “Contains the name of the photographer, but in cases where the photographer should not be identified the name of a company or organisation may be appropriate.” You can extract this field by using either Creator or By-line as the value for field in a mapping, for example:

{
  field: 'By-line',
  metadataPropertyName: 'creator'
}

We found inconsistencies with the EXIF data provided in different images. If you have any problems with the extraction of these metadata, please provide us with an example file. We will try to improve our extraction system.

Here is a complete list of fields you can use. Please consult https://www.iptc.org/std/photometadata/specification/IPTC-PhotoMetadata for detailed descriptions of the meaning of the single fields.

Hugo Extraction

When you use the image Drag&Drop from Hugo+ you can configure mappings from Hugo fields to metadata properties similar to the exif extraction. For this you have to set the hugoExtraction property.

This feature is only supported for the mediaImage mediaType.

Comyan Extraction

Added in: release-2024-07

When you use the image Drag&Drop from Comyan you can configure mappings from Comyan fields to metadata properties similar to the exif extraction. For this you have to set the comyanExtraction property.

This feature is only supported for the mediaImage mediaType. Make sure to configure the mediaType for settings.integrations.comyan.targetMediaType in the project config.

Example:

comyanExtraction: {
  mappings: [
    {field: 'ImgName', metadataPropertyName: 'title'},
    {field: 'IPTCCaption', metadataPropertyName: 'caption'},
    {field: 'IPTCByLine', metadataPropertyName: 'source'},
    {fullObject: true, metadataPropertyName: 'comyan'},
  ]
}

When setting fullObject: true, all Comyan data fields are stored in the corresponding metadata property. Make sure the underlying plugin uses a non-strict object for the storage schema.

Media Sources

This feature is only supported for mediaTypes of type mediaImage.

With Media Sources you can integrate asset research/import into Livingdocs. Instead of having to log in to another platform like Unsplash and then drag + drop images into Livingdocs, you can have Unsplash assets search results available directly in Livingdocs.