Skip to content

Create From Scratch

To make the templates you created available to users, you need to create an asset source. This example shows the minimal amount of code you need to write to have your templates appear in the Asset Library. For a more complete description of the different ways you can configure the asset library, take a look at the customize asset library guide.

Add local asset source

Add a local asset source, using an arbitrary id that identifies the asset source. In this case the asset source id is my-templates.

instance.engine.asset.addLocalSource(
  'my-templates',
  undefined,
  function applyAsset(asset) {
    instance.engine.scene.applyTemplateFromURL(asset.meta.uri);
  },
);

applyAsset()

Assets that the user has chosen from the asset library are passed to the applyAsset function.

This function determines what to do with the selected asset. In our case we want to apply it to the scene using the scene API. Note that you can access the entire asset object here. This means you can use it to store and process arbitrary information in the meta property. In this example, we are passing a URI to a template file, but you could also pass an internal identifier, a serialized scene string, or additional data to further modify or process the template using the available API methods.

function applyAsset(asset) {
  instance.engine.scene.applyTemplateFromURL(asset.meta.uri);
}

Source Id

Every asset source needs a source id. Which one you chose does not really matter, as long as it is unique.

    'my-templates',
    undefined,

Add template assets to the source

Every template asset should have four different properties:

  • id: string needs to be a uniqe identifier. It is mainly used internally and can be chosen arbitrarily.
  • label: string describes the template and is being rendered inside the template library via tooltip and as ARIA label.
  • meta.thumbUri: string pointing to a thumbnail source. Thumbnails are used in the template library shown in the inspector 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.
  • meta.uri: string provides the scene to load, when selecting the template. This can either be a raw scene string starting with UBQ1, an absolute or relative URL pointing at a scene file, or an async function that returns a scene string upon resolve.
instance.engine.asset.addAssetToSource('my-templates', {
  id: 'template1',
  label: 'Template 1',
  meta: {
    uri: `${window.location.protocol}//${window.location.host}/template.scene`,
    thumbUri: `${window.location.protocol}//${window.location.host}/template_thumb.png`,
  },
});

UI Config

It is not enough to add the asset source to the Creative Engine. You also need to configure how the asset source will appear in the asset library. For more information, see the asset library guide. In this example we provide the minimal configuration to have the template library we just created appear.

instance.ui.addAssetLibraryEntry({
  id: 'my-templates-entry',
  sourceIds: ['my-templates'],
  sceneMode: 'Design',
  previewLength: 5,
  previewBackgroundType: 'cover',
  gridBackgroundType: 'cover',
  gridColumns: 3,
});
instance.ui.setDockOrder([
  {
    id: 'ly.img.assetLibrary.dock',
    key: 'my-templates-dock-entry',
    label: 'My Templates',
    icon: '@imgly/Template',
    entries: ['my-templates-entry'],
  },
]);

Full Code

Here’s the full code:

import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/assets',
  callbacks: { onUpload: 'local' }, // Enable local uploads in Asset Library.
};


CreativeEditorSDK.create('#cesdk_container', config).then(async instance => {
  instance.addDemoAssetSources({ sceneMode: 'Design' });
  instance.engine.asset.addLocalSource(
    'my-templates',
    undefined,
    function applyAsset(asset) {
      instance.engine.scene.applyTemplateFromURL(asset.meta.uri);
    },
  );
  instance.engine.asset.addAssetToSource('my-templates', {
    id: 'template1',
    label: 'Template 1',
    meta: {
      uri: `${window.location.protocol}//${window.location.host}/template.scene`,
      thumbUri: `${window.location.protocol}//${window.location.host}/template_thumb.png`,
    },
  });
  instance.ui.addAssetLibraryEntry({
    id: 'my-templates-entry',
    sourceIds: ['my-templates'],
    sceneMode: 'Design',
    previewLength: 5,
    previewBackgroundType: 'cover',
    gridBackgroundType: 'cover',
    gridColumns: 3,
  });
  instance.ui.setDockOrder([
    {
      id: 'ly.img.assetLibrary.dock',
      key: 'my-templates-dock-entry',
      label: 'My Templates',
      icon: '@imgly/Template',
      entries: ['my-templates-entry'],
    },
  ]);
  instance.createDesignScene();
});