Skip to main content
CESDK/Web/Configuration/Presets
Language:

Page Formats

The CreativeEditor 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.

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

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



Configuring custom Page Formats#

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

  • meta: object describes a preset items meta data including whether it's the default item via default: true.
  • width: number specifies the width of the page in the specified design unit.
  • height: number specifies the height of the page in the specified design unit.
  • unit: string (px, mm or in) describes unit in which width, height and bleedMargin are specified. See here for more details.
  • dpi: number (Optional) defines the dpi value to use when converting between pixels and non-pixel design units.
  • bleedMargin: number (Optional) sets a default bleed margin to add to a page in this format.

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.

File:
import 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/cesdk.umd.js';
let config = {
baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.7.0/assets',
presets: {
pageFormats: {
'din-a6': {
meta: {
default: true
},
width: 148,
height: 105,
unit: 'mm', // Millimeter
bleedMargin: 2
},
'twitter-profile': {
width: 400,
height: 400,
unit: 'px' // Pixel
},
'american-letter': {
width: 8.5,
height: 11,
unit: 'in', // Inch
bleedMargin: 1
}
}
}
};
CreativeEditorSDK.init('#cesdk_container', config).then((instance) => {
/** do something with the instance of CreativeEditor SDK **/
});