Cloudimage - Documentation

Accounts created before Nov. 1st, 2021

Accounts created before November 1, 2021 have to include /v7/ in the path, like shown below.

//token.cloudimg.io/v7/original_image_url?operations&filters

Accounts created on or after November 1, 2021 do not require /v7/ and documentation have been updated accordingly.
To verify the type of configuration on your Cloudimage account, log in to your Cloudimage admin panel and look at the syntax provided on the Welcome page.

[NOTE] If you are an existing Cloudimage customer and wish to be able to remove the v7 from your URL syntax, please contact our support.

Kentico Kontent Custom Element

Cloudimage Custom Element in Kontent CMS

1) Have a Kontent CMS setup. https://kontent.ai/

2) Add custom element

Content model (left hand side) > Create new > Custom element (right hand side). You will then have the below view.

Photo alt \#responsive

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:

{
    "token": "your_token",
    "baseURL": "your_base URL",
    "lazyLoading": true/false,
    "mgmtApiKey": "your Management API key",
}

note: "mgmtApiKey" is obtained from:

Photo alt \#responsive

3) 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.

Photo alt \#responsive

After publishing, it will look like below. The URLs are Cloudimage accelerated.

Photo alt \#responsive

Previewing

Tutorial: 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).

Photo alt \#responsive

Write a client app that utilizes the Delivery API

Recall that Kontent have 3 set of APIs that you can interact with

Photo alt \#responsive

Delivery APIs in plain HTTPS form can be downloaded from https://kontent.ai/learn/tutorials/develop-apps/get-started/postman-collection/ and imported into POSTMAN

Photo alt \#responsive

For the 3 content items that comes out of the box, Kontent already have an example client app, which we can imitate.

  • Hosted on Github Pages: https://kentico.github.io/kontent-sample-app-preview-react/{rest of the URL}

Photo alt \#responsive

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

Photo alt \#responsive

Codename, URLSlug & ItemId are obtained as follows:

Photo alt \#responsive

Once you done all the above, you can preview by clicking Preview

Photo alt \#responsive

Support