Skip to main content
CESDK/Web/Guides/APIs
Language:

Apply a Template Scene

In this example, we will show you how to use the CreativeEditor SDK's Creative Engine to apply the contents of a given template scene to the currently loaded scene through the scene API.

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

Setup#

This example uses the headless Creative Engine. See the Setup article for a detailed guide. To get started right away, you can also access the scene API within a running CE.SDK instance via cesdk.engine.scene. Check out the APIs Overview to see that illustrated in more detail.

Applying template scenes#

  • applyTemplateFromString(content: string): Promise<void>
    Applies the contents of the given template scene to the currently loaded scene.
    This loads the template scene while keeping the design unit and page dimensions of the current scene. Page contents remain centered when the pages are resized to fit the new dimensions.
  • applyTemplateFromURL(url: string): Promise<void>
    Applies the contents of the given template scene to the currently loaded scene.
    This loads the template scene while keeping the design unit and page dimensions of the current scene. Page contents remain centered when the pages are resized to fit the new dimensions.
  • get(): number
    returns the id of the current scene.
File:
import CreativeEngine from 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.7.0/index.js';
const config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-engine/1.7.0/assets'
};
// Fetch scene file and store it as a string.
const SCENE_CONTENT = await fetch(
'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/templates/cesdk_postcard_1.scene'
).then((response) => {
return response.text();
});
CreativeEngine.init(config).then(async (engine) => {
// Creating scenes
// highlight-create
let scene = engine.scene.create();
// highlight-create
// highlight-createFromImage
scene = await engine.scene.createFromImage(
'https://img.ly/static/ubq_samples/sample_4.jpg'
);
// highlight-createFromImage
// Export the scene to an image
let imageData = await engine.block.export(scene);
// Loading scenes
// highlight-loadFromString
scene = engine.scene.loadFromString(SCENE_CONTENT);
// highlight-loadFromURL
scene = await engine.scene.loadFromURL(
'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/templates/cesdk_postcard_1.scene'
);
imageData = await engine.block.export(scene);
// Save the scene
// highlight-saveToString
scene = await engine.scene.saveToString();
// highlight-saveToArchive
const archive = await engine.scene.saveToArchive();
// Apply a template scene
engine.scene.applyTemplateFromString(SCENE_CONTENT);
engine.scene.applyTemplateFromURL(
'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets/templates/cesdk_postcard_1.scene'
);
// Get the scene id
scene = engine.scene.get();
// highlight-zoom
engine.scene.setZoomLevel(1.0);
engine.scene.setZoomLevel(0.5 * engine.scene.getZoomLevel());
await engine.scene.zoomToBlock(scene, 20.0, 20.0, 20.0, 20.0);
// highlight-zoom
engine.dispose();
});