Configuration Settings of Getty Images Library SDK

In this example, we will show you how to configure the Getty Images Library SDK.

In addition to the PE.SDK's basic configuration options the Getty Images Library SDK comes with a set of additional configuration parameters.

gettyAPIKey#

The client-side Getty Images API key which you can request here.

gettyTokenURL#

The URL that implements the OAuth flow with Getty's resource server. This defaults to the current host with the path api/token.

gettyTokenURL#

Promise that returns the OAuth token. This option provides more flexibility than the gettyTokenURL.

displaySize#

The size of the preview image displayed by the editor.

searchParams#

Search parameters for the Getty Images API, refer to Getty Images documentation for a complete list.

imageSize#

The size of the final image generated on export.

endpoint#

Allows setting the default image search endpoint. If left blank all images will be searched.

onError#

A function to handle errors occurring at the API level. Reference the full list here.

onConfirm#

A function that is invoked on export before licensing an image passing the following arguments:

onExportLicensedImage licenses the image, loads it into the editor and returns the URL for the licensed image for further handling.
image contains image metadata as returned by the Getty Images API.
onLicense licenses the image and returns a URL without loading it into the editor.
onClick triggers the export event which can be used to save a serialization of the editor state.


IntegrationGettyImages.PhotoEditorSDKUI.init({
  gettyAPIKey: "API-KEY",
  gettyTokenURL: `${window.location.href}/token`,
  fetchToken: () => Promise.resolve('OAUTH-TOKEN'),
  /**
   * image size for editor preview
   * can be one of the following values:
   * 'thumb',
   * 'preview',
   * 'comp',
   * 'mid_res_comp',
   * 'high_res_comp'
   */
  /**
   * Promise that returns OAuth token
   */
  displaySize: DisplaySizeName.Comp,
  /**
   * Configure image search params
   * Typescript types https://github.com/imgly/pesdk-web-plugins/tree/main/plugins/getty-images/src/api/searchImages.ts
   * Getty API https://api.gettyimages.com/swagger/index.html#Images
   */
  searchParams: {
    phrase: "adventure",
    age_of_people: "young_adult",
    orientation: "horizontal"
  },
  /**
   * image size to generate final output
   * can be one of the following values:
   * 'x_small',
   * 'small',
   * 'medium',
   * 'large',
   * 'x_large',
   * 'xx_large',
   */
  imageSize: ImageSize.Large,
  /**
   * set the default endpoint for the image search, if no value is set all images will be searched on initialization
   */
  endpoint: SearchImagesEndpoint.Creative,
  /**
   * Handle errors occurred during API call
   * https://github.com/imgly/pesdk-web-plugins/tree/main/plugins/getty-images/src/types.ts
   */
  onError: () => { console.log('handle error here') },
  onConfirm: async (onExportLicensedImage, image, onLicense, onClick) => {
    // default
    onExportLicensedImage();
    // use onExportLicenseImage if you want to download the image and load it into the image editor
    // this function will return the URL for the licensed image
    // const uri = await onExportLicensedImage();

    // use onLicense if you want to license the image and return the URL
    // this function will not load the image into the editor
    // const uri = await onLicense();

    // calling onClick will trigger the export event that can be used to save a serialization
    // onClick();
  },
});