Kontent.ai
Cloudimage Kontent.ai connector
Installation
Prerequisites
You need to have a Kontent CMS setup. https://kontent.ai/
Step 1. Add custom element
Content model (left hand side) > Create new > Custom element (right hand side). You will then have the below view.
Hosted code URL: https://scaleflex.cloudimg.io/v7/plugins/cloudimage-kontent/cloudimage.html?func=proxy
Parameters are the information that Kontent-Cloudimage needs to accelerate your images. See below:
json{
"token": "your_token",
"baseURL": "your_base URL",
"lazyLoading": true/false,
"mgmtApiKey": "your Management API key",
}note: "mgmtApiKey" is obtained from:
Step 2. Create new content with this Kontent-Cloudimage Custom Element
Content & asset (left hand side) > Create new > Chose type: Cloudimage. Chose add/remove some images, publish. You will then have the below view.
After publishing, it will look like below. The URLs are Cloudimage accelerated.
Step 3. Set up a preview
Here, you can find a tutorial on how to set up a preview: https://kontent.ai/learn/tutorials/develop-apps/build-strong-foundation/set-up-preview/
Go to Settings > API Keys. For this, you will definitely need your Project ID. You may also need your API Key (depends on what you want to do, but for simple things Project ID is enough).
Write a client app that utilizes the Delivery API
Recall that Kontent have 3 set of APIs that you can interact with
Delivery APIs in plain HTTPS form can be taken from https://kontent.ai/learn/tutorials/develop-apps/get-started/postman-collection/ , imported into POSTMAN
For the 3 content items that comes out of the box, Kontent already have an example client app, which we can imitate.
This example app was made by using React JS https://github.com/Kentico/kontent-sample-app-react
Hosted on Github Pages:
https://kentico.github.io/kontent-sample-app-preview-react/{restof the URL}
After writing and hosting your client app, go to Settings > Preview URLs and define your Preview URL formats.
See how Kontent defined their preview URLS for their example app
Codename, URLSlug & ItemId are obtained as follows:
Once you done all the above, you can preview by clicking Preview
Support
Last updated
Was this helpful?