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.

You can define these custom page formats in the configuration under ui.pageFormats. The keys of this object should be i18n localization keys and the contained items of the following structure:

    pageFormats: {
      'din-a6': {
        default: true,
        width: 148,
        height: 105,
        unit: 'Millimeter',
        fixedOrientation: false
      },
      'twitter-profile': {
        width: 400,
        height: 400,
        unit: 'Pixel'
      },
      'american-letter': {
        width: 8.5,
        height: 11,
        unit: 'Inch'
      }
    },

default: true can be used to mark a page format as the default format.

        default: true,

width: number specifies the width of the page in the specified design unit.

        width: 148,

height: number specifies the height of the page in the specified design unit.

        height: 105,

unit: 'Millimeter'|'Inch'|'Pixel' describes unit in which width, height and bleedMargin are specified.

        unit: 'Millimeter',

fixedOrientation: boolean (Optional) defines that the orientation of this preset should not be flipped by the user.

fixedOrientation: false;

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 next to the page format selector. This button is disabled if the fixedOrientation flag is 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.52.0/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  ui: {
    pageFormats: {
      'din-a6': {
        default: true,
        width: 148,
        height: 105,
        unit: 'Millimeter',
        fixedOrientation: false,
      },
      'twitter-profile': {
        width: 400,
        height: 400,
        unit: 'Pixel',
      },
      'american-letter': {
        width: 8.5,
        height: 11,
        unit: 'Inch',
      },
    },
    scale: 'normal',
    stylesheets: {
      /* ... */
    },
    elements: {
      /* ... */
    },
  },
  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' });
  await instance.createDesignScene();
});