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:

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": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
    }
  ]
}

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": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link"
    },
    {
      "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/video-link"
    }
  ]
}

Content chooser example

To allow the user to choose content of an existing type or create new content of the specified type, we can use a content chooser property. 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 link to an external piece of content stored separately to the banner.

For a complete example of a content type with links to external content, see the carousel sample.

{
  "background": {
    "title": "background image",
    "description": "The background image for the banner",
    "type": "object",
    "allOf": [
      {
        "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
      },
      {
        "properties": {
          "contentType": {
            "title": "Background image",
            "enum": [
              "https://dev-solutions.s3.amazonaws.com/DynamicContentTypes/Accelerators/image.json"
            ]
          }
        }
      }
    ]
  }
}

Content links and content references

The background property shown in the content chooser example is a content-link property type. When you retrieve a content item containing content links, the linked content items are returned as well, as shown in the sample output from the carousel example.

{  
   "@id":"http://content.cms.amplience.com/74e63f17-d336-438c-a402-cea9bfa81632",
   " _meta":{  
      "schema":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/ dynamiccontenttutorials/democarousel.json",
      "name":"hats-hats-hats-carousel"
   },
   " slides":[  
      {  
         "@id":"http://content.cms.amplience.com/a7b3db34-b17a-4263-8f35- 918670fd72fd",
         "@type":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/ dynamiccontenttutorials/democarouselslide.json",
         "_meta":{  
            "schema":"https://s3-eu -west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/ democarouselslide.json",
            "name":"hat-slide-1"
         },
         "image":{  
            "@id":"http://image.cms. amplience.com/50d6d113-67e1-40f0-af44-2f830959d39a",
            "_meta":{  
               "schema":"http:// bigcontent.io/cms/schema/v1/core#/definitions/image-link"
            },
            "id":"50d6d113-67e1- 40f0-af44-2f830959d39a",
            "name":"hat-woman-german",
            "endpoint":"ampproduct",
            " defaultHost":"cdn.media.amplience.net",
            "mediaType":"image"
         }
      },
      {  
         "@id":"http://content.cms. amplience.com/f4e45689-fdff-40a5-9eb0-d2fc443574fd",
         "@type":"https://s3-eu-west- 1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselslide. json",
         "_meta":{  
            "schema":"https://s3-eu-west-1.amazonaws.com/amp-product/ tutorials/dynamiccontenttutorials/democarouselslide.json",
            "name":"hat-slide-2"
         },
         "image":{  
            "@id":"http://image.cms.amplience.com/34b14fb4-e590-4d37-b254- 504a4c6c7de9",
            "_meta":{  
               "schema":"http://bigcontent.io/cms/schema/v1/core#/ definitions/image-link"
            },
            "id":"34b14fb4-e590-4d37-b254-504a4c6c7de9",
            "name":"hat -woman-english",
            "endpoint":"ampproduct",
            "defaultHost":"cdn.media.amplience.net",
            "mediaType":" image"
         }
      },
      {  
         "@id":"http://content.cms.amplience.com/5a59f1a4-0b61-44d2-bdf7- 93d767f6d2b9",
         "@type":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/ dynamiccontenttutorials/democarouselslide.json",
         "_meta":{  
            "schema":"https://s3-eu -west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/ democarouselslide.json",
            "name":"hat-slide-3"
         },
         "image":{  
            "@id":"http://image.cms. amplience.com/a76b51d3-0c80-436f-9bb5-a72c46cc5d59",
            "_meta":{  
               "schema":"http:// bigcontent.io/cms/schema/v1/core#/definitions/image-link"
            },
            "id":"a76b51d3-0c80- 436f-9bb5-a72c46cc5d59",
            "name":"hat-woman-french",
            "endpoint":"ampproduct",
            " defaultHost":"cdn.media.amplience.net",
            "mediaType":"image"
         }
      },
      {  
         "@id":"http://content.cms. amplience.com/f53c210d-9517-4680-af4d-32fab3b16c7e",
         "@type":"https://s3-eu-west- 1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselslide. json",
         "_meta":{  
            "schema":"https://s3-eu-west-1.amazonaws.com/amp-product/ tutorials/dynamiccontenttutorials/democarouselslide.json",
            "name":"hat-slide-4"
         },
         "image":{  
            "@id":"http://image.cms.amplience.com/d1381a88-24ea-4c1b-87b6- 950e01339a27",
            "_meta":{  
               "schema":"http://bigcontent.io/cms/schema/v1/core#/ definitions/image-link"
            },
            "id":"d1381a88-24ea-4c1b-87b6-950e01339a27",
            "name":" woman-in-hat",
            "endpoint":"ampproduct",
            "defaultHost":"cdn.media.amplience.net",
            "mediaType":" image"
         }
      }
   ],
   "@type":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/ dynamiccontenttutorials/democarousel.json"
}

Using the content-reference property type you can link to external content items, but retrieve those items only when needed.

An example of a property using the content-reference property type is shown below. The format of the property is the same as a content-link and you specify the content types that can be added to this property in the enum.

{  
   "contentReference":{  
      "title":"referencedcontent",
      "description":"Choose referenced content",
      "allOf":[  
         {  
            "$ref":"http://bigcontent.io/cms/schema/v1/core#/definitions/content-reference"
         },
         {  
            "properties":{  
               "contentType":{  
                  "enum":[  
                     "http://permitted-content-type-id"
                  ]
               }
            }
         }
      ]
   }
}

When you retrieve a content item with a content reference property, the id of the referenced content will be returned, rather than the entire item, as shown in the example output below. You can then use the id to retrieve the linked content when required.

{ 
   "@id":"http://content.cms.amplience.com/54cb30c7-e142-49d0-9e50-74f20c234452",
   "_meta":{ 
      "schema":"http://content.ref",
      "name":"content-reference"
   },
   "myContentReference":{ 
      "_meta":{ 
         "schema":"http://bigcontent.io/cms/schema/v1/core#/definitions/content-reference"
      },
      "contentType":"http://basic.example",
      "id":"de111147-1a23-47c6-aee1-4060dd570b3d"
   },
   "@type":"http://content.ref"
}

Content references are particularly useful when working with a content item such as a blog, where you might want to link to several related blogs, but only load one of these blogs when the user requests them.

Using the schema editor to add media and content links

The schema editor can be used to add media and content links to your content type schemas. In the example shown below, a content reference property is added to the schema.

You can also use the schema editor to view sample JSON output, as in this example showing sample output from a content reference property.

Related pages

The Schema Editor

Inline and linked content