Examples

To begin using transformation functions, here are some examples. For more detailed information, please refer to this document. Additionally, the Swagger documentation is a valuable resource for information about endpoints, request, and response models.

Using the built-in transformations

To obtain the original images, use the _original transformation. Additionally, there are several built-in transformation functions available, including the _small-preview transformation, which returns a 350x350 pixel WebP image while preserving the aspect ratio. For more details, see here and use the /api/_/transformation-functions/{id} endpoint for a complete list of all transformations in your environment.

Using these functions is as simple as finding the URL of the CDN host and constructing a final URL.

Given a CDN host of https://my-cdn-url.bizzkit.com and an image ID of e15b1f59-94b2-4331-884d-c1b39628f510 (find the ID using the UI or API), the final URL could be:

• Original image: https://my-cdn-url.bizzkit.com/e15b1f59-94b2-4331-884d-c1b39628f510/_original
• Transformed using the _small-preview transformation: https://my-cdn-url.bizzkit.com/e15b1f59-94b2-4331-884d-c1b39628f510/_small-preview

Creating a transformation

To create a transformation, use the /api/_/transformation-functions POST endpoint and provide a CreateTransformationFunctionModel. This model is used to define a new transformation function, specifying the transformations to be applied to images and the output format.

Here is a simple example using a resize transformation:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  "transformationFunctionId": "myresize-transformation",
  "description": "Resize example",
  "outputFormat": "WebP",  
  "transformations": [
    {
      "type": "Resize",
      "width": 150
    }
  ]
}

Here is an example using a canvas transformation:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

{
  "transformationFunctionId": "mycanvas-transformation",
  "description": "Canvas example",
  "outputFormat": "WebP",  
  "transformations": [
    {
      "type": "Canvas",
      "width": 150,
      "AllowEnlarge": false,
      "AllowWhitespaceExpansion": false      
    }
  ]
}

A more complex example would be to merge an image (called a resource image) and change its size:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

{
  "transformationFunctionId": "mymerge-transformation",
  "description": "Canvas example",
  "outputFormat": "WebP",  
  "transformations": [
    {
      "type": "Canvas",
      "width": 800,
      "AllowEnlarge": false,
      "AllowWhitespaceExpansion": false      
    },
    {
      "type": "Merge",
      "resourceImageId": "ee02b9fa-ccde-43cd-90b1-a11483705d80",
      "onTop": true,
      "horizontalPosition": "Right",
      "verticalPosition": "Bottom"
    }
  ]
}

Please refer to the Swagger documentation for information on the different properties of the CreateTransformationFunctionModel and TransformationStepModel.