Skip to main content
CESDK/Web/Configuration/Presets
Language:

Adding Images to the Image Library

The CreativeEditor SDK allows adding image elements to the scene. The available images can be controlled through the config.presets.images object.

Explore a full code sample of the integration on CodeSandbox or view the code on GitHub.

Added images are directly accessible from the image library:



Configuring Custom Images#

You can define your own images in the configuration under presets.images. The keys of these items identify the images and the contained items of the following structure:

  • imageURL: string pointing to the image source. Supports http(s):// and relative paths which resolve to the baseURL.
  • thumbnailURL?: string pointing to a thumbnail source. If not set, the imageURL is used. Thumbnails are used in the image element library shown above and should ideally have a width of 400px for landscape images. Keep in mind, that a large number of large thumbnails may slow down the library.
  • width: number of the image. Used to determine the initial element dimensions when adding the image to the scene.
  • height: number of the image. Used to determine the initial element dimensions when adding the image to the scene.
File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/cesdk.umd.js';
let config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets',
presets: {
images: {
imgly_logo: {
imageURL: 'https://img.ly/static/ubq_samples/imgly_logo.jpg',
thumbnailURL: 'https://img.ly/static/ubq_samples/thumbnails/imgly_logo.jpg',
width: 1980,
height: 720
}
}
}
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
});