Asset Library Entry

An Asset Source is defined within the engine and can be seen as some sort of database of assets, it does not define how these assets are presented to the user. The web editor provides a versatile asset library that will display the assets in a user-friendly way inside a panel. However since an asset source does not provide any presentational information, the web editor needs to be told how to display the assets. This connection is made with an Asset Library Entry.

When you open the asset library, either by calling openPanel or adding a ly.img.assetLibrary.dock component to the dock, you must provide asset library entries. Only with these entries, the asset library will know what and how to display assets.

Managing Asset Library Entries#

The CE.SDK web editor has an internal store of asset library entries that are referenced by asset libraries. You can find, add, remove, and update entries in this store.

CreativeEditorSDK.create('#cesdk', config).then(async (cesdk) => {
  await cesdk.addDefaultAssetSources();
  await cesdk.addDemoAssetSources();

  await cesdk.createDesignScene();

  // Find all asset library entries
  const entryIds = cesdk.ui.findAllAssetLibraryEntries();
  if (entryIds.includes('ly.img.image')) {
    // Get the default image entry of the web editor
    const entry = cesdk.ui.getAssetLibraryEntry('ly.img.image');
    // ... to add a new source id.
    cesdk.ui.updateAssetLibraryEntry('ly.img.image', {
      sourceIds: [...entry.sourceIds, 'my.own.image.source'],
    });
  }

  // Add a new custom asset library entry
  cesdk.ui.addAssetLibraryEntry({
    id: 'my.own.image.entry',
    sourceIds: ['my.own.image.source'],
    sceneMode: 'Design',
    previewLength: 5,
    previewBackgroundType: 'cover',
    gridBackgroundType: 'cover',
    gridColumns: 2
  });

  // Remove a default entry for stickers.
  cesdk.ui.removeAssetLibraryEntry('ly.img.sticker');

Using Asset Library Entries#

Asset library entries are used by an asset library. How the library gets the entries depends on the context. The main use case for a library is the dock. This is described in the Dock API documentation. We will describe further use cases here.

Replace Asset Library#

The fill of a block can be replaced with another asset. What assets are applicable is different for each block. The web editor provides a function setReplaceAssetLibraryEntries. It gets a function that is used to define what block should be replaced with what asset. It will get the current context (most importantly the selected block) and will return ids to asset library entries that shall be used by the replace asset library.

cesdk.ui.setReplaceAssetLibraryEntries((context) => {
  const { selectedBlocks, defaultEntryIds } = context;

  // Most of the time replace makes only sense if one block is selected.
  if (selectedBlocks.length !== 1) {
    // If no entry ids are returned, a replace button will not be shown.
    return [];
  }

  // id, block and fill type are provided for the selected block.
  const { id, blockType, fillType } = selectedBlocks[0];
  if (fillType === '//ly.img.ubq/fill/image') {
    return ['my.own.image.entry'];
  }

  return [];
});

Background Tracks Asset Library#

In the video timeline, the background track allows only certain type of assets. With setBackgroundTrackAssetLibraryEntries you can define what asset library entries are allowed for the background track when the user clicks on the "Add to Background Track" button.

// Only the image and video entries are allowed for the background track.
cesdk.ui.setBackgroundTrackAssetLibraryEntries(['ly.img.video', 'ly.img.video']);

Asset Library Entry Definition#

Define What to Display#

The following properties tell the asset library what data should be queried and displayed.

Define How to Display#

Besides properties that define what data should be displayed, there are also properties that specify how the data should be displayed to meet specific use case requirements.