Serving IMG.LY Premium Templates

This guide explains how to integrate and serve premium templates from IMG.LY in your application using the provided asset archive. The premium template package contains the following structure:

1. content.json: An index file listing all the template assets that can be loaded into CE.SDK.
2. Directories for each template containing the following:
   1. asset.json: A manifest file containing metadata about the template.
   2. thumbnail.jpg: A preview image of the template.
   3. design.zip: A CE.SDK archive file also containing all associated assets.

Here’s a step-by-step tutorial to set up and use these templates.

Prerequisites#

1. Ensure you have a self-hosted server to host the asset files.
2. Have a working CE.SDK instance integrated into your application.

Steps to Serve Premium Templates#

Organize and Host Assets#

Unzip the provided archive and upload the folders (ecommerce-retro-story-n99, etc.) to your hosting server. Ensure the following files are hosted:

• asset.json
• thumbnail.jpg
• design.zip

A manifest file listing all templates and their meta data:

• content.json

These files should be accessible via URLs (e.g., https://yourdomain.com/assets/ecommerce-retro-story-n99/).

Configure CE.SDK#

Update your CE.SDK configuration to serve templates from your hosted assets.

Example Configuration:

const config = {
  baseURL: 'https://yourdomain.com/assets' // Your hosting URL base path
};

let contentJSON = await fetch(
  'https://yourdomain.com/assets/templates/content.json'
).then((res) => res.json());

CreativeEngine.init(config).then((engine) => {
  loadAssetSourceFromContentJSON(
    engine,
    contentJSON,
    'https://yourdomain.com/assets/templates'
  );
});

This configuration tells CE.SDK to fetch templates and resources from your server.

Load Templates from content.json#

Use the content.json file to load templates into CE.SDK:

import { AssetDefinition, AssetResult, CreativeEngine } from '@cesdk/cesdk-js';

async function loadAssetSourceFromContentJSON(
  engine: CreativeEngine,
  content: ContentJSON,
  baseURL = '',
  applyAsset?: ((asset: AssetResult) => Promise<number | undefined>) | undefined
) {
  const { assets, id: sourceId } = content;

  engine.asset.addLocalSource(sourceId, undefined, applyAsset);
  assets.forEach((asset) => {
    if (asset.meta) {
      Object.entries(asset.meta).forEach(([key, value]: [any, any]) => {
        const stringValue: string = value.toString();
        if (stringValue.includes('{{base_url}}')) {
          const updated = stringValue.replace('{{base_url}}', baseURL);
          if (asset.meta) {
            asset.meta[key] = updated;
          }
        }
      });
    }

    if (asset.payload?.sourceSet) {
      asset.payload.sourceSet.forEach((sourceSet) => {
        sourceSet.uri = sourceSet.uri.replace('{{base_url}}', baseURL);
      });
    }

    engine.asset.addAssetToSource(sourceId, asset);
  });
}
export type ContentJSON = {
  version: string,
  id: string,
  assets: AssetDefinition[]
};

export default loadAssetSourceFromContentJSON;

Test and Verify#

1. Load your application.
2. Ensure that the template thumbnails appear in the library.
3. Select a template to verify it loads correctly into the editor.

Additional Tips#

• Cache templates: Use CDN or caching mechanisms for faster load times.
• Secure your assets: If assets are meant for authenticated users only, ensure they are protected with proper access controls.

This guide should get you started with integrating and serving IMG.LY premium templates in your application. If you encounter issues or have questions, refer to the CE.SDK documentation on serving assets or contact support.