The carousel sample is a simple example of linked content: content that includes links to external content items. In this case the parent content item is a carousel that links to one or more child items: the carousel slides. This type of content makes it easy to reuse content items. For example, the carousel slides could be used in more than one carousel or grid.

On this page we've included carousel and carousel slide content types and visualizations for both types. We also show you how to register the content types so you can use them to create content. You must register both the carousel and carousel slide before you can create a carousel and add slides to it.

Adding a carousel slide to a carousel
Adding a carousel slide to a carousel

The carousel content type stores the carousel slides in an array of between 1 and 6 items (minItems and maxItems). There are no additional properties included in the carousel.

In many cases when designing linked content such as a carousel or a grid, you'd design the content type so that users would be able to add more than one type of content. So the carousel could include a banner and a video as well as an image, for example. See Content choosers for more information about linking to external content.

In this example we've set up the carousel so that it can contain between 1 and 6 carousel slides, but to allow other types of content to be added you can add additional content types to the enum in the slides property. You'd also need to add the code to render these additional types.

{ "$schema": "http://bigcontent.io/cms/schema/v1/schema#", "id": "https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarousel.json", "title": "Demo Carousel", "description": "Carousel", "allOf": [ { "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content" } ], "type": "object", "properties": { "slides": { "title": "Carousel slides", "description": "slides within the carousel", "type": "array", "items": { "allOf": [ { "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content-link" }, { "properties": { "contentType": { "title": "Carousel Slides", "enum": [ "https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselslide.json" ] } } } ], "minItems": 1, "maxItems": 6 } } } }

To register the carousel content type on the current hub, choose "Content types" from the Development menu, click the "Register Content Type" button and enter the URI in the Content type URI field. If you wish to use the carousel from this example, use the following URI to register it. You will also need to enable it in all the content repositories in which you want to create content from the carousel content type.

https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarousel.json
Registering the carousel content type
Registering the carousel content type

If you want to create your own version of this content type, you can upload your version to a hosting service and update the id field to the URI of its new location. You would then register the content type using the new URI.

Right click to download the carousel content type.

Setting up the content card

To choose the content card, click the "+" icon in the content type card section to choose a card. In the example below we have used the gallery card and mapped each of the 4 images shown on the card to the image of the first 4 carousel slides. image0 on the gallery card is set to /slides/0/image, image1 to /slides/0/image and so on.

Visit Cards for more details on using the built-in cards. For a custom card that cycles through each of the carousel images in turn, see the Custom cards page.

Setting up the card for the carousel
Setting up the card for the carousel

Here's the card for a carousel content item in the Content Library. The gallery card shows 4 carousel slide images in a grid.

A gallery of carousel slides displayed on the card for a carousel content item
A gallery of carousel slides displayed on the card for a carousel content item

Configuring the visualization

For the carousel we have included a visualization that cycles through each slide in turn. To set up the visualization click the "Add a visualization" button, give the visualization a name and enter the following for the visualization URI:

https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselviz.html?api={{vse.domain}}&content={{content.sys.id}}

The visualization will then be available when you create, view or edit a carousel content item.

The visualization for a carousel content item
The visualization for a carousel content item

Download the visualization for the carousel content type.

The carousel slide is a simple image that the user chooses using a media chooser. We have included additional properties for image-alt text and a description, but these are not currently used.

{ "$schema": "http://bigcontent.io/cms/schema/v1/schema#", "id": "https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselslide.json", "title": "Demo Carousel slide", "description": "A carousel slide", "allOf": [ { "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content" } ], "type": "object", "properties": { "image": { "type": "object", "allOf": [ { "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link" } ], "title": "Slide image", "description": "The image for the carousel slide" }, "image-alt": { "type": "string", "maxLength": 256, "title": "Image alt text", "description": "The text shown if the image is not loaded", "format": "text" }, "text": { "type": "string", "maxLength": 256, "title": "Overlay text", "description": "The text shown over the image", "format": "text" } } }

Register the carousel slide in the same way that you registered the carousel and enter the following URI:

https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselslide.json

Right click to download the carousel slide content type.

To set up the content card, use the photo built-in card and enter "/image" in the image field to map the carousel slide image to the card.

Registering the carousel slide
Registering the carousel slide

The visualization for the carousel slide is very simple and just shows the image. When you register the visualization use the following URI:

https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/democarouselslideviz.html?api={{vse.domain}}&content={{content.sys.id}}

Download the carousel slide visualization.

Example content

An example of content created using the carousel content type is shown below. Notice that the content is an array of carousel slides.

{ "@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":"i1.adis.ws", "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":"i1.adis.ws", "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":"i1.adis.ws", "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":"i1.adis.ws", "mediaType":" image" } } ], "@type":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/ dynamiccontenttutorials/democarousel.json" }

results matching ""

    No results matching ""