Skip to content

URI Resolver

CE.SDK gives you full control over how URIs should be resolved. To register a custom resolver, use setURIResolver and pass in a function implementing your resolution logic. If a custom resolver is set, any URI requested by the engine is passed through the resolver. The URI your logic returns is then fetched by the engine. The resolved URI is just used for the current request and not stored. If, and only if, no custom resolver is set, the engine performs the default behaviour: absolute paths are unchanged and relative paths are prepended with the value of the basePath setting.

We can preview the effects of setting a custom URI resolver with the function getAbsoluteURI.

Before setting a custom URI resolver, the default behavior is as before and the given relative path will be prepended with the contents of basePath.

/** This will return 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/assets/banana.jpg'. */
instance.engine.editor.getAbsoluteURI('/banana.jpg');

To show that the resolver can be fairly free-form, in this example we register a custom URI resolver that replaces all .jpg images with our company logo. The resolved URI are expected to be absolute.

Note: you can still access the default URI resolver by calling defaultURIResolver(relativePath).

/** Replace all .jpg files with the IMG.LY logo! **/
instance.engine.editor.setURIResolver((uri, defaultURIResolver) => {
  if (uri.endsWith('.jpg')) {
    return 'https://img.ly/static/ubq_samples/imgly_logo.jpg';
  }
  /** Make use of the default URI resolution behavior. */
  return defaultURIResolver(uri);
});

Given the same path as earlier, the custom resolver transforms it as specified. Note that after a custom resolver is set, relative paths that the resolver does not transform remain unmodified.

  /**
   * The custom resolver will return a path to the IMG.LY logo because the given path ends with '.jpg'.
   * This applies regardless if the given path is relative or absolute.
   */
  instance.engine.editor.getAbsoluteURI('/banana.jpg');


  /** The custom resolver will not modify this path because it ends with '.png'. */
  instance.engine.editor.getAbsoluteURI('https://example.com/orange.png');


  /** Because a custom resolver is set, relative paths that the resolver does not transform remain unmodified! */
  instance.engine.editor.getAbsoluteURI('/orange.png');

To remove a previously set custom resolver, call the function with a null value. The URI resolution is now back to the default behavior.

  /** Removes the previously set resolver. */
  instance.engine.editor.setURIResolver(null);


  /** Since we've removed the custom resolver, this will return 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/assets/banana.jpg' like before. */
  instance.engine.editor.getAbsoluteURI('/banana.jpg');

Full Code

Here’s the full code:

import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/index.js';


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


CreativeEditorSDK.create('#cesdk_container', config).then(instance => {
  /** This will return 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/assets/banana.jpg'. */
  instance.engine.editor.getAbsoluteURI('/banana.jpg');


  /** Replace all .jpg files with the IMG.LY logo! **/
  instance.engine.editor.setURIResolver((uri, defaultURIResolver) => {
    if (uri.endsWith('.jpg')) {
      return 'https://img.ly/static/ubq_samples/imgly_logo.jpg';
    }
    /** Make use of the default URI resolution behavior. */
    return defaultURIResolver(uri);
  });


  /**
   * The custom resolver will return a path to the IMG.LY logo because the given path ends with '.jpg'.
   * This applies regardless if the given path is relative or absolute.
   */
  instance.engine.editor.getAbsoluteURI('/banana.jpg');


  /** The custom resolver will not modify this path because it ends with '.png'. */
  instance.engine.editor.getAbsoluteURI('https://example.com/orange.png');


  /** Because a custom resolver is set, relative paths that the resolver does not transform remain unmodified! */
  instance.engine.editor.getAbsoluteURI('/orange.png');


  /** Removes the previously set resolver. */
  instance.engine.editor.setURIResolver(null);


  /** Since we've removed the custom resolver, this will return 'https://cdn.img.ly/packages/imgly/cesdk-js/1.51.0/assets/banana.jpg' like before. */
  instance.engine.editor.getAbsoluteURI('/banana.jpg');
});