Search
Loading...
Skip to content

Crop Presets

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

The CE.SDK can be configured with a series of crop presets through the config.ui.cropPresetsLibraries 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 Crop Presets#

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

Fixed Aspect Ratio#

When a fixed aspect ratio preset is applied it will resize the crop frame based on the width and height values provided.

{
  id: 'aspect-ratio-16-9',
  label: {
    en: '16:9'
  },
  meta: {
    width: 80,
    height: 120,
    thumbUri: `${window.location.protocol}//${window.location.host}/ratio-16-9.png`
  },
  payload: {
    transformPreset: {
      type: 'FixedAspectRatio',
      width: 16,
      height: 9
    }
  }
}
  • type: type specifies the preset type.
type: "FixedAspectRatio",
  • width: number specifies the width of the crop frame.
width: 16,
  • height: number specifies the height of the crop frame.
height: 9,

Free Aspect Ratio#

When a free aspect ratio preset is applied it will enable the side-handles of the crop frame.

{
  id: 'aspect-ratio-free',
  label: {
    en: 'Free'
  },
  meta: {
    width: 80,
    height: 120,
    thumbUri: `${window.location.protocol}//${window.location.host}/ratio-free.png`
  },
  payload: {
    transformPreset: {
      type: 'FreeAspectRatio'
    }
  }
}
  • type: type specifies the preset type.
type: "FreeAspectRatio",

Fixed Size#

When a fixed size preset is applied it will resize the selected block to the width and height provided.

{
  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',

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.53.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.53.0/assets',
  userId: 'guides-user',
  ui: {
    scale: 'normal',
    stylesheets: {
      /* ... */
    },
    elements: {
      /* ... */
    },
    pagePresetLibraries: [
      // 'ly.img.crop.presets',
      'my-custom-crop-presets'
    ]
  },
  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 crop preset asset source.
  instance.engine.asset.addLocalSource('my-custom-crop-presets');


  instance.engine.asset.addAssetToSource(
    'my-custom-crop-presets',
    {
      id: 'aspect-ratio-free',
      label: {
        en: 'Free'
      },
      meta: {
        width: 80,
        height: 120,
        thumbUri: `${window.location.protocol}//${window.location.host}/ratio-free.png`
      },
      payload: {
        transformPreset: {
          type: 'FreeAspectRatio'
        }
      }
    }
  );


  instance.engine.asset.addAssetToSource(
    'my-custom-crop-presets',
    {
      id: 'aspect-ratio-16-9',
      label: {
        en: '16:9'
      },
      meta: {
        width: 80,
        height: 120,
        thumbUri: `${window.location.protocol}//${window.location.host}/ratio-16-9.png`
      },
      payload: {
        transformPreset: {
          type: 'FixedAspectRatio',
          width: 16,
          height: 9
        }
      }
    }
  );


  instance.engine.asset.addAssetToSource(
    'my-custom-crop-presets',
    {
      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();
});