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 by creating custom asset sources or updating the content.json from the default asset source on the CDN, and then using the API to update the crop presets library entry.

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 then updating the crop presets library entry using cesdk.ui.updateAssetLibraryEntry('ly.img.cropPresets', { sourceIds: [...] }). 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.62.0/index.js';


const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  // baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.62.0/assets',
  userId: 'guides-user',
  ui: {
    stylesheets: {
      /* ... */
    },
    elements: {
      /* ... */
    }
  }
};


CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => {
  // Do something with the instance of CreativeEditor SDK
  // Set scale using the new API
  instance.ui.setScale('normal');
  // Populate the asset library with default / demo asset sources.
  instance.addDefaultAssetSources();
  instance.addDemoAssetSources({
    sceneMode: 'Design',
    withUploadAssetSources: true
  });


  // 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'
        }
      }
    }
  );


  // Update crop presets library entry
  instance.ui.updateAssetLibraryEntry('ly.img.cropPresets', {
    sourceIds: [
      // 'ly.img.crop.presets',
      'my-custom-crop-presets'
    ]
  });


  await instance.createDesignScene();
});