Search
Loading...
Skip to content

Page Format

By default, the CreativeEditor SDK ships with an extensive list of commonly used formats, as shown below:

The CE.SDK can be configured with a series of page formats that can then be selected in the editor by a user with the Creator role.

The available page formats can be controlled through the config.ui.pagePresetLibraries object and by creating custom asset sources or updating the content.json from the default asset source on the CDN.

To enable the CE.SDK defaults enable our default asset sources by using addDefaultAssetSources.

await addDefaultAssetSources();

Configuring Custom Page Formats#

You can define your own page formats by creating a custom asset source and by registering it in the configuration under ui.pagePresetLibraries. Each of the asset objects in the asset source must define a value for its payload.transformPreset property.

{
  id: 'din-a1-portrait',
  label: {
    en: 'DIN A1 Portrait'
  },
  meta: {
    width: 80,
    height: 120,
    thumbUri: `${window.location.protocol}//${window.location.host}/din-a1-portrait.png`
  },
  payload: {
    transformPreset: {
      type: 'FixedSize',
      width: 594,
      height: 841,
      designUnit: 'Millimeter'
    }
  }
}
  • type: type specifies the preset type.
type: "FixedSize",
  • width: number specifies the width of the page in the specified design unit.
width: 1280,
  • height: number specifies the height of the page in the specified design unit.
height: 720,
  • unit: 'Millimeter'|'Inch'|'Pixel' describes unit in which width, height and bleedMargin are specified.
designUnit: 'Pixel',
  • default: true can be used to mark a page format as the default format. The asset source must be available before the scene initialization for the default to take effect.
default: true,

Page Orientation#

The initial orientation of a page is simply defined by the width and height properties in the format definition. For example, the DIN A6 format defined above defaults to landscape, the American Letter to portrait. The orientation of a page can be changed in the editor with the button inside the document inspector. This button is disabled if the fixedOrientation property of the applied preset set to true.

Full Code#

Here’s the full code for configuring the default page formats:

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


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.54.0/assets',
  userId: 'guides-user',
  ui: {
    scale: 'normal',
    stylesheets: {
      /* ... */
    },
    elements: {
      /* ... */
    },
    pagePresetLibraries: [
      // 'ly.img.page.presets',
      // 'ly.img.page.presets.video',
      'my-custom-formats'
    ]
  },
  callbacks: { onUpload: 'local' } // Enable local uploads in Asset Library.
};


CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => {
  // Do something with the instance of CreativeEditor SDK
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({ sceneMode: 'Design' });


  // Add a custom page preset asset source.
  instance.engine.asset.addLocalSource('my-custom-formats');
  instance.engine.asset.addAssetToSource(
    'my-custom-formats',
    {
      id: 'din-a1-portrait',
      label: {
        en: 'DIN A1 Portrait'
      },
      meta: {
        width: 80,
        height: 120,
        thumbUri: `${window.location.protocol}//${window.location.host}/din-a1-portrait.png`
      },
      payload: {
        transformPreset: {
          type: 'FixedSize',
          width: 594,
          height: 841,
          designUnit: 'Millimeter'
        }
      }
    }
  );


  await instance.createDesignScene();
});