Create a DAT Derivative Using URL Parameters

  • Updated

You can create Dynamic Asset Transformations by adding parameters to the DAT derivative URL or by adding them in your Asset Detail View. Once you've set up all the necessary transformations, you can configure the output options. Once generated, the DAT derivative will have the selected file extension. When you need to apply Dynamic Asset Transformation (DAT) on a website or another platform, automating the process is crucial. For instance, in the case of a web store where product photos require consistent cropping to 800 by 800 pixels with a 5-pixel border, manually creating these transformations in Bynder repeatedly is inefficient. Utilizing our API, you can integrate DAT on your external platform by utilizing the DAT base URL along with specific parameters to achieve the desired transformations efficiently.

How to enable this feature in your portal?

Contact your Customer Success Manager to enable this feature in your portal and learn about any associated costs.

Available Transformations

Transform

Filters

Overlay

Output

Background

Brightness

Color Fill/Box

File Type

Border

Grayscale

Text

Quality

Crop

Blur

Image

Automatic Download

Scale

Sharpness

   

Crop

Saturation

   

Rotate

Temperature

   

Flip

     

Mirror

     

Border

     

Background

     

 

Create DAT Derivatives Using URL Parameters

  1. Navigate to Asset Bank.

  2. Select the asset that you want to create a Dynamic Asset Transformation.

  3. Copy the DAT derivative URL in the Link to Public Files section. This URL functions as the base URL to which you'll add your transformations.

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

  5. Click the corresponding dropdown for more detailed information on the available transformations.

Transform

Fill

Properties

Name

Type

Default Value

Range

Transformed image width in pixels

width

int

﹥0 and less than max width (max-width = width of the base DAT derivative)

 

Transformed image height in pixels

height

int

﹥0 and less than max height (max height = width of the base DAT derivative)

 

Indicates which area to keep for the transformation. The other areas may be cropped.

gravity

sting

center

Center, top, top left, topright, left, right, bottom, bottom left, bottom right

Fit

Resize the image based on the specified parameters. The aspect ratio will not change. See the example below.

?io=transform:fit,width:200,height:200

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=transform:extend,width:110,height:100

Properties

Name

Type

Default Value

Required

Transformed image width in pixels

width

int

﹥0 and less than max width (max width = width of the base DAT derivative)

Yes

Transformed image height in pixels

height

int

﹥0 and less than max height (max height = width of the base DAT derivative)

Yes

Extend

Extend the image to the specified dimensions. See the example below.

?io=transform:extend,width:110,height:100

Name

Type

Default Value

Description

Range

Required

width

int

﹥0 and less than max width (max width = width of the base DAT derivative)

Fit the image (resize) to a box based on the specified width and height.

 

Yes

height

int

﹥0 and less than max height (max height = width of the base DAT derivative)

     

background

string

white

 

HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color.

 

Scale

Scale the image to the specified width and height. The aspect ratio may change. See the example below.

?io=transform:scale,width:200,height:200

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=transform:scale,width:200,height:200

Name

Type

Default value

width

int

﹥0 and less than max width (max width = width of the base DAT derivative)

height

int

﹥0 and less than max height (max height = width of the base DAT derivative)

Crop

Crop a part of the image. See the example below.

?io=transform:crop,width:200,height:200

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=transform:crop,path:circle,width:600,height:800,background:yellow,blur:55

Name

Type

Default Value

Description

Range

Required

width

int

﹥0 and less than max width (max width = width of the base DAT derivative)

   

Yes

height

int

﹥0 and less than max width (max width = width of the base DAT derivative)

   

Yes

gravity

string

center

The crop will start from the specified area. This part of the image will remain and other areas may be cropped.

Center, top, topleft, topright, left, right, bottom, bottomleft, bottomright

No

path

string

circle

This will change the crop to a round shape. Make sure width and height are set to the same dimensions in order to use a circle. Use different dimensions to use an oval.

 

No

background

string

white

Add a background color

HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color.

No

blur

int

0

Blur the edge of the crop

0 to 100

No

Rotate

Rotate the image clockwise based on the specified degrees. See the example below.

?io=transform:rotate,angle:270

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=transform:rotate,angle:45

Name

Type

Default Value

Description

Range

Required

angle

int

0

Rotate the image by a certain angle in degrees, clockwise

0 < 360

Yes

Flip

Flip the image vertically. See the example below.

?io=transform:flip

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=transform:flip

Mirror

Flip the image horizontally. See the example below.

?io=transform:mirror

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=transform:mirror

Border

Add a border around the image and specify the border width and border color. See the example below.

?io=transform:border,width:2,color:black

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/?io=transform:border,width:10,color:white

Name

Type

Description

Range

Required

width

int

The border width specified in pixels.

﹥0 and less than the maximum width of the DAT derivative

Yes

color

string

The color of the border

Specify the border color using HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color.

No

Background

Change the background color of a transparent image. See the example below.

?io=transform:background,color:grey

Name

Type

Default Value

Range

Required

color

string

white

Specify the background color using HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color.

Yes

Filters

Opacity

Adjust the transparency of the whole image.

?io=filter:opacity,amount:60

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:opacity,amount:60

Name

Type

Range

Required

amount

int

0—100 (% based value)

No

Sepia

Apply a sepia filter to the image.

?io=filter:sepia

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:sepia

Contrast

Adjust the contrast level of the image.

?io=filter:contrast,amount:80

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:contrast,amount:80

Name

Type

Range

Required

amount

int

-100—100 (% based value)

No

Brightness

Adjust the brightness level of the image.

?io=filter:brightness,amount:80

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:brightness,amount:80

Name

Type

Range

Required

amount

int

-100—100 (% based value)

No

Grayscale

Convert the colors an image to black and white.

?io=filter:grayscale

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:grayscale

Blur

Apply a blur effect to the image.

?io=filter:blur,radius:20

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:blur,radius:20

Name

Type

Range

Required

radius

int

﹥0 (blur radius in pixels)

No

Sharpness

Adjust the sharpness of the image.

?io=filter:sharpness,amount:80

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:sharpness,amount:80

Name

Type

Range

Required

amount

int

-100—100 (% based value)

No

Saturation

Adjust the saturation level of the image.

?io=filter:saturation,amount:80

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:saturation,amount:80

Name

Type

Range

Required

amount

int

-100—100 (% based value)

No

Vignette

Add a vignette effect to the image.

?io=filter:vignette,amount:100,color:black,softness:50

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:vignette,amount:100,color:black,softness:50

Name

Type

Description

Range

Required

amount

int

Controls the opacity of the gradient

0-10

No

color

string

HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color.

 

No

softness

int

% based value

-100—100

No

Temperature

Adjust the color temperature of the image.

?io=filter:temperature,amount:5000

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=filter:temperature,amount:5000

Name

Type

Description

Range

Required

amount

int

Controls the color temperature in kelvin

800-12000

yes

Overlay

Color Overlay

Apply an overlay with a solid color and specified transparency to the image.

?io=overlay:box,color:red,opacity:20

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=overlay:box,color:red,opacity:20

Name

Type

Default Value

Description

Range

Required

color

string

 

Specify the color using HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color.

 

yes

opacity

int

25%

% based value

0-100

no

Text Overlay

Apply a text layer to the image.

?io=overlay:text,content:some%20text,font:Arial,size:11,color:black,angle:45

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=overlay:text,content:TEST,font:Arial,size:80,color:blue,gravity:topleft,angle:25

Name

Type

Default Value

Description

Range

Required

content

string

 

URL encoded string

 

yes

font

string

arial

supported fonts and uploaded custom fonts

 

no

size

int

16

font size

﹥1

no

color

string

#fff

Specify the color using HTML color names (red, white, black, yellow) or HEX codes. Use auto to set the most dominant color inside the image as border color.

 

no

angle

int

 

angle units

 

no

Image Overlay

Apply an image layer to the image.

io=overlay:image,asset:{asset_id},width:200,opacity:45,angle:45,gravity:center,padding:30

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?io=overlay:image,asset:46759cf6-0ac2-4e5e-9ae5-db3659a7465d,width:100,height:100,gravity:bottomleft

Name

Type

Default Value

Description

Range

Required

asset

uuid

 

The existing asset ID of a Bynder image asset (used for the overlay)

 

yes

width

int

 

overlay width

﹥0

no

height

int

 

overlay height

﹥0

no

rotate

int

 

rotation amount in degrees

0-359

no

opacity

int

100%

adjust overlay transparency

0-100

no

gravity

string

center

 
  • center

  • right

  • left

  • topleft

  • top

  • topright

  • bottomleft

  • bottom

  • bottomright

no

padding

int

 

applies padding to the overlay image

﹥0

no

Output

Output Quality

?quality=80

Set the quality of the output file. This only works for webP and jpg files.

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?quality=10

Name

Type

Range

Required

quality

int

1-100

yes

Automatic Download

&download=true

Ensure that the download of the DAT derivative will start automatically upon visiting the URL.

Example URL: https://datdemo.getbynder.com/transform/7c898bc9-a2e6-4f4b-be22-bc7c18ea987f/surfer?download=true

Name

Type

Range

Required

download

int

true

yes

Limitations

DAT does not currently support SVG as an output format.

If you would like to use an SVG as an output, you should mark the file as Public in the Advanced Rights section of the asset, then use the Original URL that will appear in the Public Links section of the Asset Detail view.

SVG files loaded into Bynder will still generate Webp DAT derivatives that can be used with the DAT UI and Presets.

Was this article helpful?

0 out of 0 found this helpful

We're sorry to hear that!

Find out more in our community

Have more questions? Find out more in our community