Tutorial banner sample

The tutorial banner is a simple content type containing a headline, subheading, a call to action URL and title, and a background image.

On this page we've included the tutorial banner content type, provided details of how to register the content type so you can use it to create content, and set up the card and visualization.

The example banner

Here's the structure of the tutorial banner showing its component parts.

The structure of the example banner
The structure of the example banner
  1. The Heading. This is a text item.
  2. The Sub-heading also a text item
  3. The call to action text
  4. The call to action URI that will be launched when the user clicks
  5. The background. This is an image item.

The content type

The complete tutorial banner content type is shown below. The banner just contains text properties and an image chooser.

{ "$schema": "http://bigcontent.io/cms/schema/v1/schema#", "id": "https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/tutorialbanner.json", "title": "Tutorial banner", "description": "The banner used in the developer tutorials", "allOf": [ { "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content" } ], "propertyOrder": [ "headline", "strapline", "background", "callToActionText", "callToActionUrl" ], "type": "object", "properties": { "background": { "allOf": [ { "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/image-link" } ], "title": "Background image", "description": "The background image for the banner", "type": "object" }, "headline": { "title": "Headline", "description": "The main title of this banner", "type": "string", "format": "text", "minLength": 5, "maxLength": 256 }, "strapline": { "title": "Strapline", "description": "The subtitle for this banner", "type": "string", "format": "text", "maxLength": 256 }, "callToActionText": { "title": "Call to action text", "description": "The text you want displayed with the call to action", "type": "string", "format": "text", "maxLength": 256 }, "callToActionUrl": { "title": "Call to action URL", "description": "The URL for the call to action", "type": "string", "format": "uri", "maxLength": 256 } } }

Registering the tutorial banner content type

As you can see from the id field of the content type shown above, the banner has been uploaded to the following URI:

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

In order to use the content type to create content, you first need to register it on a hub. Choose "Content types" from the Development menu, click the "Register Content Type" button and enter the URI in the Content type URI field as highlighted in the image below.

Registering the tutorial banner content type
Registering the tutorial banner content type

The content type should be enabled on all content repositories in which you want to use this content type to create content. In this example we are just enabling it in the content repository called "content".

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

You can choose on of the build in icons to represent the tutorial banner content type, or use your own custom icon. See Specifying an icon for a content type for more details.

Setting up the card

A card is a web app that displays a representation of a piece of content in the Content Library window. You can use one of our built-in cards for a content type or create your own. When you set up the tutorial banner, the easiest thing to do is to use one of our built-in types and map the fields of the banner to elements displayed on the card.

Click the "+" icon in the content type card section to choose a card. In the example below we have chosen the photo card and mapped the background image from the banner to the image element of the card. Cards explains how to use each of the built-in cards.

Setting up the card for the tutorial banner
Setting up the card for the tutorial banner

The Custom cards page shows how you can create your own cards and provides an example of a custom card for the tutorial banner.

Configuring the visualization

A visualization is a web app that displays a preview of a piece of content. When you register the tutorial banner type, 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/tutorialbannervizl.html
?api={{vse.domain}}&content={{content.sys.id}}

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

The tutorial banner visualization
The tutorial banner visualization

The Visualizations page provides more details about how a visualization is structured, how you can develop your own, and walks you through the visualization used for the tutorial banner.

Registering a content type is explained in more detail on the Registering content types page.

Example content

Here's an example of what a tutorial banner content item looks like when published and rendered on a website.

Example content created using the tutorial banner content type
Example content created using the tutorial banner content type

A content item can be published directly from the Content Library, or if you are using the planning and scheduling features, added to a slot in an edition that is then scheduled for publishing.

As explained on the The Content Delivery API page, you can consume a slot or content item using its slot or content ID. See Consuming content for more information about consuming content included in a slot. Download an example to show how to consume a tutorial banner content item.

You can also preview the content before it is published as a visualization or as part of a content preview.

Some example published content created using the tutorial banner content type is shown below.

{ "@id":"http://content.cms.amplience.com/cea10270-7c3f-44b8-88d3-475956d2a901", "_meta":{ "schema":" https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/tutorialbanner.json ", "name":"summer-banner" }, "calltoactiontext":"Buy now", "background":{ "@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" }, "calltoactionurl":"http://www.anyafinnstore.com/summercollection", "strapline":"Get ready with a new wardrobe!", "headline":"Summer is here", "@type":"https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/tutorialbanner.json" }

results matching ""

    No results matching ""