Knowledge Base

On the Fly Generator (Beta)

Would you like to generate customized derivatives on demand and use them in your external systems? With the On the Fly (OTF) Generator you can request a customized derivative by adding parameters to OTF derivative URL.

By using OTF derivatives that are optimized for the platform and/or device your users are working on you can ensure that they have the best user experience possible.

The On the Fly Generator is fully integrated into your Bynder Dam making sure you don't need to rely on external systems for OTF generation. Find out below how you can start integrating OTF derivatives into your external websites, social media platforms and email newsletters.

How to Enable the On the Fly Generator?

Inform your Customer Success Manager that you would like to participate in the Beta program. Your Customer Success Manager will be happy to further assist you in setting this up.

How to Create On the Fly (OTF) Derivatives?

You can create OTF derivatives by adding parameters to the OTF derivative URL.

  1. Open the asset for which you want to create an OTF derivative.

  2. Copy the OTF derivative URL in the Link to public files section. This URL functions as the base URL to which you'll add your transformations.

  3. Create your customized OTF derivative by adding one of the transformations indicated in the table below directly behind the OTF derivative URL.

Resize Transformations

Transformation

Description

Parameters

Resize

Use this transformation to set the exact width and height of the OTF derivative. This operation will change the aspect ratio if the original image has a different aspect ratio.

&io=operation:resize,width:400,height:400

Resize with defined output file type

Use this transformation to set the width, height and file type for the OTF derivative.

This operation will change the aspect ratio if the original image has a different aspect ratio.

Valid output types: png, jpeg & webp

&io=operation:resize,width:400,height:400&output=png

Resize by width

Use this transformation to set the width of the OTF derivative. The height will be set automatically respecting the aspect ratio of the original image.

&io=operation:resize,width:100

Resize by height

Use this transformation to set the height of the OTF derivative. The width will be set automatically respecting the aspect ratio of the original image.

&io=operation:resize,height:100,width:auto

Resize by height and set aspect ratio

Use this transformation to set the height of the OTF derivative and a custom aspect ratio. The width will be set automatically respecting the custom aspect ratio.

If the custom aspect ratio differs from the aspect ratio of the original image the OTF derivative will be distorted.

&io=operation:resize,height:100,width:auto,aspectratio:1.77

Resize while maintaining aspect ratio

Use this transformation to resize the OTF derivative to a maximum width or height. The smallest value will be used.

The other dimension will be set automatically respecting the aspect ratio of the original image.

&io=operation:resize,maxwidth:100,maxheight:50

Manual resize with new aspect ratio

Use this transformation to resize the OTF derivative to a maximum width or height and to set a custom aspect ratio.

The value of the smallest dimension will be used for resizing. The other dimension will be set automatically respecting the custom aspect ratio.

If the custom aspect ratio differs from the aspect ratio of the original image the OTF derivative will be distorted.

&io=operation:resize,maxwidth:100,maxheight:100,aspectratio:1.77

Resize extending the canvas with a solid colour

Use this transformation to resize the image to the specified width and height as well as to fill the canvas with a solid colour

Supported colors: red, green, blue, yellow, white, black

&io=operation:resize,width:100,height:100,extend:true,background:blue

Resize + Crop Transformations

Transformation

Description

Parameters

Crop from the center

Use this transformation to crop an area of x by y pixels from the center of the image.

&io=operation:crop,width:400,height:400

Crop from an x and y coordinate

Use this transformation to crop an area of x by y pixels starting from a specified position using x and y coordinates. The coordinates of the top left corner of the image are x=0 & y=0

&io=operation:crop,width:400,height:200,x:10,y:0

Crop from a focal point

Use this transformation to crop an area of x by y pixels starting from the focal point.

The focal point is defined in the asset detail view and uses the x and y coordinates. In the example the x=50 and y=40

&io=operation:crop,width:100,height:100&focalpoint=50,40

Resize and crop maintaining aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended width and height will be cropped in order to maintain the aspect ratio of the original image.

&io=operation:resize,width:400,height:400,crop:true

Resize and crop bottom maintaining aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended space at the bottom of the image will be cropped in order to maintain the aspect ratio of the original image.

crop_bottom.png

&io=operation:resize,width:400,height:200,crop:true,valign:top

Resize and crop top and bottom maintaining aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended space at the top and bottom of the image will be cropped in order to maintain the aspect ratio of the original image.

top_bottom_crop.png

&io=operation:resize,width:400,height:200,crop:true,valign:middle

Resize and crop top maintaining aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended space at the top of the image will be cropped in order to maintain the aspect ratio of the original image.

top_crop.png

&io=operation:resize,width:400,height:200,crop:true,valign:bottom

Resize and crop right maintaining aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended space at the right side of the image will be cropped in order to maintain the aspect ratio of the original image.

crop_right.png

&io=operation:resize,width:400,height:200,crop:true,halign:left

Resize and crop right and bottom maintaining aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended space at the right and bottom of the image will be cropped in order to maintain the aspect ratio of the original image.

crop_right_bottom.png

&io=operation:resize,width:400,height:200,crop:true,valign:top,halign:left

Resize and crop right, left and bottom maintaining aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended space at the right, left and bottom of the image will be cropped in order to maintain the aspect ratio of the original image.

crop_right_left_bottom.png

&io=operation:resize,width:400,height:200,crop:true,valign:top,halign:middle

Resize and crop left and bottom maintaining aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended space at the left and bottom of the image will be cropped in order to maintain the aspect ratio of the original image.

crop_left_bottom.png

&io=operation:resize,width:400,height:200,crop:true,valign:top,halign:right

Resize and crop top, bottom and right side maintaining aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended space at the top, bottom and right of the image will be cropped in order to maintain the aspect ratio of the original image.

crop_top_bottom_right.png

&io=operation:resize,width:400,height:200,crop:true,valign:middle,halign:left

Resize and crop right, left, top and bottom maintaining aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended space at the right, left, top and bottom of the image will be cropped in order to maintain the aspect ratio of the original image.

crop_right_left_top_bottom.png

&io=operation:resize,width:400,height:200,crop:true,valign:middle,halign:middle

Resize and crop top, bottom and left maintaining aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended space at the top, bottom and left of the image will be cropped in order to maintain the aspect ratio of the original image.

crop_top_bottom_left.png

&io=operation:resize,width:400,height:200,crop:true,valign:middle,halign:right

Resize and crop top and right maintaining aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended space at the top and right of the image will be cropped in order to maintain the

aspect ratio of the original image.

crop_top_right.png

&io=operation:resize,width:400,height:200,crop:true,valign:bottom,halign:left

Resize and crop top, right and left maintaining aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended space at the top, right and left of the image will be cropped in order to maintain the

aspect ratio of the original image.

crop_top_right_left.png

&io=operation:resize,width:400,height:200,crop:true,valign:bottom,halign:middle

Resize and crop top and left maintaining from aspect ratio

Use this transformation to resize the OTF derivative to a specified width and height.

Any extended space at the top and left of the image will be cropped in order to maintain the

aspect ratio of the original image.

crop_top_left.png

&io=operation:resize,width:400,height:200,crop:true,valign:bottom,halign:right

Learn More