Skip to main content
Language:

Make Your Assets Searchable

In this example, we will show you how to make your assets searchable in CreativeEditor SDK.

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

By default, every asset is searchable inside the asset library by its id. But since ids are not always descriptive, you can assign labels to every asset in multiple languages to improve searchability.

This works for assets added as a preset in the configuration, but also for assets from an extension pack.

In case you want to add searchable labels to an image from a preset, the id of this preset needs to be appended to the assets namespace in the i18n section of the configuration for every language you want to support. For the id imgly_logo in our example, the path to the searchable label would be assets.imgly_logo.label.

For assets from extension packs, you need to use the extension pack id together with the asset id. Take our sample images extension pack which is included by default. The id of the extension pack is //ly.img.cesdk.images.samples and the id of one image inside is sample.1 so the path to the translated label key is assets.ly.img.cesdk.images.samples.sample.1.label.

Since the label is also shown as a tooltip inside the asset library, it's advisable to keep it short and readable. Additional keywords or tags intended to aid discoverability can instead be added as translated tags to every asset and will be searched as well.

File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.9.0/cesdk.umd.js';
let config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.9.0/assets',
presets: {
// highlight-image-preset
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
}
}
// highlight-image-preset
},
i18n: {
en: {
'assets.imgly_logo.label': 'img.ly Logo wow',
'assets.imgly_logo.tags': 'imgly;logo;white;purple',
'assets.imgly_logo.label.tags': 'imgly;logo;white;purple',
'assets.ly.img.cesdk.images.samples.sample.1.label': 'A really nice beach',
'assets.ly.img.cesdk.images.samples.sample.1.tags': 'beach;random'
}
}
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
});