Chained transformations

You can chain the output of one transformation as the input for the next to create the desired output image using chained transformations.

Some transformations are dependent on the sequence they're carried out in. Chained transformations provide a simple way to control the sequence in which transformations are applied.

Each step in the chained transform is separated by a colon :. The step appearing first is applied first.

      URL-endpoint               1st        2nd                                  
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”
https://ik.imagekit.io/demo/tr:w-400,h-300:rt-90/default-image.jpg

Apart from providing more control on the output image, using chained transforms also makes it easier to logically understand the transformation sequence and have no surprises. Just by reading the transformation, you would be able to anticipate the output. The output of a chained transformation, compared to writing everything in the same transformation step, is much more predictable.

Each transformation step is subject to certain limits.

Example

Let's say that we want an image to be first resized to 400x400, then we want to add a 100px padding to the left of that image which is black in color. Then we want to add ImageKit's logo in this padding on the left. The logo should have a height of 20px and should be positioned 10px from the left and 40px from the top.

This is a complex transformation to achieve. Let's break it down in to steps.

1. Resize to 400x400

This is fairly straightforward.

w-400,h-400

2. Add a 100px padding to the left

100px padding on the left means that the resulting image will have a width of 400+100px = 500px. And the image should be completely on the right in this image. This is achieved using the pad_resize crop mode (to pad the image in case resize doesn't match the aspect ratio) along with the focus parameter set to right (to focus the image to the right). We also need to set the background to black (#000000). The transformation becomes -

w-500,h-400,cm-pad_resize,fo-right,bg-000000

3. Overlay ImageKit's logo

ImageKit's logo is accessible at path logo-white_SJwqB4Nfe.png and then we can position and resize the overlay using layers. The transformation becomes

l-image,i-logo-white_SJwqB4Nfe.png,lx-10,ly-50,h-20,l-end

We combine these three steps into a chain with each step separated by a colon (":")

Final Chained Transformation

w-400,h-400:w-500,h-400,cm-pad_resize,fo-right,bg-000000:l-image,i-logo-white_SJwqB4Nfe.png,lx-10,ly-50,h-20,l-end

Final URL - https://ik.imagekit.io/demo/img/default-image.jpg?tr=w-400,h-400:w-500,h-400,cm-pad_resize,fo-right,bg-000000:l-image,i-logo-white_SJwqB4Nfe.png,lx-10,ly-50,h-20,l-end

Last updated