Sample: Tutorial banner slot
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
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.
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.
The full banner slot type is shown below.
Expand the section below to see the full banner slot type.
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.
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.
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.
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".
Adding content to a slot
Expand the section below to see an example of adding content to this slot
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.
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.
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:
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.