Media and content choosers

We provide a standard set of choosers for media types, including images and video, to make it easy for users to choose media to add to their content. When a chooser definition is included in a content type, the content editing user interface allows the user to choose images or video from their media library using a simple media browser, or content from their content library.

The currently supported choosers are shown below:

Chooser Schema

Media chooser Example

The background property from the tutorial banner sample is shown below. This specifies that the user can choose a single image to be added to the banner using the built in image browser.

"background": { "title": "Background image", "description": "The background image for the banner", "type": "object", "allOf": [ { "$ref": "" } ] }

If we wanted the background to be either an image or a video, then the anyOf keyword can be used and both the image and video choosers specified. The user will then be able to choose a single image or video.

Once the content is saved, the background property of this content item will contain a reference to the image or video.

"background": { "title": "Background image", "description": "The background image for the banner", "type": "object", "anyOf": [ { "$ref": "" }, { "$ref": "" } ] }

Content chooser Example

To allow the user to choose content of an existing type or create new content of that type, we can use the content chooser. One or more content types can be specified and the user can select the one they want.

In the example below the tutorial banner has been modified to replace the image chooser with a reference to a custom image accelerator defined in a file called image.json. When the tutorial banner is opened in the content editing window, the user can create a new image accelerator content type or choose an existing one.

Once the user chooses the background content item, the background property will contain a reference to an external piece of content stored separately to the banner.

For a complete example of a content type referencing external content, see the Carousel sample.

{ "background": { "title": "background image", "description": "The background image for the banner", "type": "object", "allOf": [ { "$ref": "" }, { "properties": { "contentType": { "title": "Background image", "enum": [ "" ] } } } ] } }

The list of choosers may be extended in the future to include other types of media and support for third party browsers.

results matching ""

    No results matching ""