Search

Searching DEVELOPERS

Export Page

Content Authoring- Accelerators

The Content Authoring accelerators are a set of resources that can speed up your Content Authoring implementation by up to 80 percent. The accelerators are a collection of the most useful and commonly used content types, including sliders, banners, blogs and video, together with all the code you need to render content created using these types. The code has been designed to make it easy to incorporate into your own projects and customise to meet your needs. As part of the package we've also included the HTML, JavaScript, CSS and handlebars templates required to render content created using these types, both as visualizations in the Content Library, on your own website or within an app. We've also included the icons and cards for each content type. 

All the resources for each of the content types, including code and installation instructions are in GitHub and that's where you should go for the latest versions. This repository includes the content types, ready for you to add to your account, together with all the rendering code. 

On this page we'll go into detail about the content types provided in the repository, explain how to use them in your account and how to customise the code to meet your requirements.

What content types are included?

The accelerators include a wide range of content types. In this section we'll list the types provided, together with an example of the visualisation for each type and its properties.

Banner

The banner type displays an image and includes properties for header and subheader, displayed in a box as shown below and also allows you to specify the various layout options. See the read me file for more information.

The source files for the Banner content type can be found here

Blog

Blogs can contain multiple content of type text, images and video, together with a snippet that defines the preview to be shown in a listings page. You will need to add other content types such as images and text, to your content type library before adding the blog type. See the read me file for more information.

Card

The card type is useful for creating product index screens with images, text and links. Cards are typically shown in a card list screen as shown below. See the read me file for more information.

Card List

As its name suggests, the card list content type is used to display a list of cards. You can find more information and navigate to the source code and other resources for this content type here.

External Block

The external block content type allows you to add content as HTML code. This is useful for embedding content such as maps, for example. The code and associated resources for this type can be found here.

Homepage

The home page content type allows you to quickly put together a home page consisting of many of the accelerator content types including video, text and banners. You will need to ensure that the other content types are added to your content type library before adding Homepage. More information, code and associated resources can be found on the GitHub page.

Image

The image type allows you to add a simple image as content as well as an optional roundel- text used to highlight a promotion, for example. If you want the image to include a roundel, make sure that a transformation template named 'roundel' is included in your account, as explained in the read me file.

A 1x1px image named "empty.png" also needs to be added to your Content Hub for the roundel to be displayed.

An image with a roundel is shown below.

Promo Banner

The promo banner type allows you to add content for clickable multiple banner sections as shown in the example below. You will need to add the section content type before adding promo banner to your content type library. More details can be found in the read me file.

Slider

The slider is an implementation of the popular carousel slider content type. You can add video, banners and images and specify whether to loop the slider and display the navigation dots. The slider can contain several other content types, so you'll need to add these to your content type library before adding the slider type. For more details, code and other resources see the GitHub page for the slider type.

Split Block

Split Block is designed to show a combination of images, video or text content, with a configurable ratio defining how the content is displayed. More information can be found on the Split Block GitHub page.

Text

The text content type allows content to be added in markdown format. It makes use of the showdown library to render the text. More information, code and resources can be found here.

Video

The video type is a simple video player. More information, code and resources can be found on the GitHub page.

Configuring a content type

Before you can use the content types included in the accelerators, you need to do some one time set up:

  • Find the latest version of the content type and code in GitHub
  • Add the content type to your account. Instructions are included in the Read Me file for each content type. Just copy the contents of the .json file in each folder and paste this into a new content type window. If a content type contains other types then these types should be added first. 
  • Go to the Content Library and create some content using this content type
  • Find the content type ID
  • Add this content type ID to the rendertypes.js file
  • Modify the visualization to reference rendertypes.js
  • Update the content type to include the URL of your modified visualization
  • Repeat the process for all the content types you wish to use
  • Build an updated version of the 'dist' folder and upload the contents of this folder to your own server location- such as AWS
 Click here to for more details of configuring a content type...

If content type has not been configured, then an error will be displayed when you viewing a visualization of content created using this type.

The Content Type ID

When you add a content type to your account, a unique content type ID is generated for it. This is separate to the content ID that identifies an individual piece of content. The content type ID is used by the accelerators rendering code to select which handlebars template to use to render a piece of content. The mapping between content type IDs and each content type is specified in a renderTypes JavaScript object and you'll need to edit this object to include the content type IDs from your own account. 

An example of the renderTypes object is shown below. The content type IDs from your own account will be different to the ones shown here:

var renderTypes = {
"blog": "163be330-ccaa-4578-ac54-2bd90eb2b14c",
"image": "923e3e48-0fea-422c-b8e0-0484fac9488d",
"text": "d91e33c9-adb7-4ea5-810e-e7750fce79a4",
"banner": "97085115-7057-41fa-8b99-ef47935ef058",
"link": "7b908316-30d9-409e-8ff7-c23fa8526cfe",
"video": "90959bb1-5135-4aa0-bc70-44f594af8223",
"slider": "1eec3f35-e6e0-4fad-b77e-bf2688014856",
"snippet": "fd83d76a-fbf4-4c7a-8c2b-e15245c1ccb2",
"card": "c06334a3-f1aa-4f91-97e3-36471596c2ba",
"splitBlock": "fa868414-4eef-4318-8660-c2f05487535c",
"promoBanner": "ac89055d-ee58-4a34-95bc-3baa96a3f97b",
"externalBlock": "abbdbc0b-8de2-4e6e-bc43-5aed9cd2ff9e",
"cardList": "cb0fce82-ce50-4473-a3d2-85734f91607f",
"homepage": "0d61522d-598f-4453-bc5c-603fc02df672"
};

To edit the renderTypes object, clone the GitHub repository to your local disk and edit renderTypes.js in the following location:

ca-frontend-renders/src/reusable/js/renderTypes.js

Finding the content type ID

To identify a content type ID, go to the Content Library, find a piece of content created using the content type you want to use, choose Get Content ID/Link from the content's card menu and then click on 'View in JSFiddle'. 

You can find out more about using JSFiddle in the Content Authoring developer tutorial.

When the JSFiddle window opens, click 'Run' to retrieve the content, click the 'View JSON' button and select the Content Tree tab. The content type ID is listed under "@type" as highlighted in the image below: 

This id should then be added to the renderTypes.js file as shown above.

Editing the visualization

Once you have set up the renderTypes.js file to include the content type IDs from you own account, you will need to update each of the visualizations to point to the location of your modified renderTypes.js file. 

In each content types folder there is a visualisation.html file. Search for the 'src' reference to rendertypes.js and change the URL to point to your updated version.

For example:

<script src="https://s3-eu-west-1.amazonaws.com/amp-product/accelerators/reusable/renderTypes.js"></script>

Note that rendertypes.js is not included in every visualization, so you won't need to update all of them. However we do recommend using your own copy of each visualization.

Editing the content type

For each content type you will need to update the visualization uri to point to your copy:

For example:

"card": [
{
"id": "defaultCard",
"category": "card",
"default": true,
"label": "Default card",
"uri": "//apps.dev-artifacts.adis.ws/cms-cards/master/latest/gallery/index.html",
"mapping": {
"headline": "/_title",
"image0": "/image/image"
}
},
{
"id": "defaultviz",
"category": "visualization",
"default": true,
"label": "Default Visualization",
"uri": "https://dev-solutions.s3.amazonaws.com/ca-frontend-renders/dist/renders/card/package/visualisation.html"
}
]
},

Once all the files are updated, upload them to your own chosen location. The visualisations for each content type should now display correctly.

Other resources

Each content type folder in the repository includes

  • a handlebars template
  • .sass files for desktop and mobile (these compile into .css files)
  • a visualisation.html file
  • an index.html file.

This is a sample home page for the content and contains some generic code that you will need to customise with your own data:

AmpCa.utils.getCaData({
auth: {
baseUrl: 'https://c1.adis.ws',
id: '476e3ddb-61b5-4c49-a5f4-db3e37f21f05',
store: 'csdemo'
},

Replace the id with a content ID of a piece of your chosen content and the store with the name of your account. Once updated, this home page can be used to test out your content and as a basis for your own code to display content on your website.

Related pages

Content Authoring accelerators GitHub page

Content Authoring Developer Tutorial, Part 1

Creating a content type

Visualizations tutorial

 

  • No labels