Sample: Tutorial banner slot

The tutorial banner content type is a simple type containing a background image, headline and subheading and call to action text and URL. You can see the full content type here.

In this example we're going to walk through how to create a slot type that just contains a tutorial banner content item and show how to create a slot item of this type, add it to edition and add content to the slot. Consuming the content in this slot is covered in the Consuming content section.

Step by step

Click the links to go directly to each step

Home page example

A simple home page is shown below, containing a header and footer and a banner slot which contains a tutorial banner content item. We will create a slot using the banner slot type and add a tutorial banner content item to it.

Home page with banner slot
Home page with banner slot

The banner slot type

The banner slot contains a property "bannerslot" that includes a content chooser that tells the UI to display a window to allow the user to choose a tutorial banner content item.

"properties": {
  "bannerslot": {
    "title": "Feature page banner",
    "description": "The banner for the feature page",
    "allOf": [
      {
        "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
      },
      {
        "properties": {
          "contentType": {
            "title": "content",
            "enum": [
              "https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/tutorialbanner.json"
            ]
          }
.....

The full banner slot type is shown below.

Expand the section below to see the full banner slot type.

{
  "$schema": "http://bigcontent.io/cms/schema/v1/schema#",
  "id": "https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/bannerslot.json",
  "title": "Feature page banner slot",
  "description": "Slot to contain the feature banner",
  "allOf": [
    {
      "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content"
    }
  ],
  "type": "object",
  "properties": {
    "bannerslot": {
      "title": "Feature page banner",
      "description": "The banner for the feature page",
      "allOf": [
        {
          "$ref": "http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
        },
        {
          "properties": {
            "contentType": {
              "title": "content",
              "enum": [
                "https://s3-eu-west-1.amazonaws.com/amp-product/tutorials/dynamiccontenttutorials/tutorialbanner.json"
              ]
            }
          }
        }
      ]
    }
  }
}

Registering the slot type

Once the slot type has been uploaded to a hosting service you can then register it with a hub and enable it on one or more slots repositories. Choose "Content types" from the Development tab and click the "Register content type" button. Slots types are associated with one or more slot repositories rather. In the example shown below there are 2 repositories named content and slots. The banner slot type is enabled on the "Slots" repository.

For more information see the registering content types page.

Registering a slot type with a hub and enabling it on slot repository
Registering a slot type with a hub and enabling it on slot repository

Creating a slot item

In the example shown below, the banner slots has been added to a repository labelled "slots". To create a new slot item, select this repository and click the "Create slot" button. The available slot types will be shown. For this example we want to create a banner slot the content of which will be displayed on the home page.

Expand the section below to see an example of creating a slot item.

Creating a banner slot item
Creating a banner slot item

We'll make the slot item easier to identify by calling it "home page banner slot". You will probably have your own naming convention for slot items. Banners are likely to be used in several different pages, so you're likely to need to create more than one slot item of the banner slot type.

Saving the banner slot item
Saving the banner slot item

Once saved, the home page banner slot item is now shown in the slot library and is available to add to editions.

Home page banner slot in the slot library
Home page banner slot in the slot library

For this example we have created a content item using the tutorial banner content type and named it "Spring bank holiday banner" as highlighted in the image below. This content has been saved to an edition we've set up for a holiday sales promotion called "Spring bank holiday teaser" within an event called "Spring bank holiday sales".

Spring bank holiday home page banner item
Spring bank holiday home page banner item

Adding content to a slot

If we open the edition you'll notice that our home page banner slot is shown in the list of available slots. We'll add this slot to the edition and then add content to the slot.

Expand the section below to see an example of adding content to this slot

Adding banner slot item to an edition
Adding banner slot item to an edition

Next we'll add the spring bank holiday banner content item to this slot. The tutorial banner content type defines a card preview and a visualization, so when we click on this content item the card preview of the background image and visualization of the entire banner is shown. If the slot supported adding multiple content items, then you would be able to continue to add content.

Once the edition is scheduled, the slot contents can be previewed using a content preview app or consumed when the content is published.

Banner content item added to the slot
Banner content item added to the slot

Finding the slot id

To consume the contents of a slot item either in a preview or as published content, you need to know the slot id. To find the id, select the slot item in the slot library and choose "Get content id" from the contextual menu as shown in the image below. This slot id can then be used to retrieve the slot and the content that it contains.

Getting the slot id
Getting the slot id

The home page with published content

When the Spring bank holiday teaser edition goes live and the content is published to the slots it contains, our home page will look something like this:

Home page with slot item and content
Home page with slot item and content

The slot item we created will contain the spring bank holiday banner content item. To consume the contents of this slot, we will use the slot id as shown in the diagram. This slot id won't change, only the contents of the slot as we schedule new editions and add new content. For more information see the Consuming content section.

The banner slot and the carousel slot example demonstrate slot types that are designed to contain a single content item of one specified type. Of course, depending on how you want to design your slots types, you can support multiple items of the same content type, or store multiple content types in the same slot. Because slot types have the same syntax as content types, you can use the same structures such as arrays, as explained on the Property types page.

The tutorial banner content type

Consuming content

results matching ""

    No results matching ""