Create a Collage

You can generate collages using Filestack's transformation engine.

Note: The maximum accepted image size is 100,000,000 pixels. An image with this many pixels could have width and height combinations like 10,000 x 10,000 or 5,000 x 20,000, etc. There is also a file size restriction. Filestack will not convert an image that is larger than 256mb. Please contact us if you require the ability to process larger files than our current limits.

Collage

Collage Task URL Format:
https://process.filestackapi.com/collage=[options]/Filestack_FileLink_Handle
or
https://process.filestackapi.com/<API_KEY>/collage=[options]/File_URL

collage=files:[0ZgN5BtJTfmI1O3Rxhce,6a9QVg1LS4uoPN7B4HYA]
Array

Can be abbreviated as f:[rFGjD9dYSLy8vh7zLDOm,Pdqi7OzHR3CitiGD41kT]

An array of Filestack file handles or external urls. These are the images that will comprise the other images in the collage. The order in which they appear in the array dictates how the images will be arranged. This is a required field.
collage=margin:50
Integer

Can be abbreviated as m:10

Sets the size of the border between and around the images. This must be an integer in a range from 1 to 100. The default value is 10.
collage=width:1000
Integer

Can be abbreviated as w:500

Sets the general width of the collage as a whole. The image passed in as a URL or handle and the images in the files array will be resized using the fit:clip function of the resize task so that the output image is close to the specified width parameter. This must be an integer in a range from 1 to 10000 and is a required field. The width parameter takes precedence over the height parameter.
collage=height:1000
Integer

Can be abbreviated as h:500

Sets the general height of the collage as a whole. The image passed in as a URL or handle and the images in the files array will be resized using the fit:clip function of the resize task so that the output image is close to the specified height parameter. This must be an integer in a range from 1 to 10000 and is a required field.
collage=color:white or FFFFFFFF
String

Can be abbreviated as c:black

Sets the border color for the collage.

This can be the word for a color, or the hex color code. The default color is white. Click here for a list of accepted color names.
collage=fit:crop
String

Can be abbreviated as i:auto

Allows you to control how the images in the collage are manipulated so that the final collage image will match the height and width parameters you set more closely. The default parameter is fit:auto. Using fit:crop will produce a result that is closest to the height and width parameters you set.
autorotate:true
Boolean

Can be abbreviated as a:true

Setting this parameter to true automatically rotates all the images in the collage according to their exif orientation data. This parameter is not required and is by default set to false.

Collage Examples

Original Image

This is the main image of the collage. It will be the URL (or Filestack handle) passed into the collage function. It will appear 1st (top left). The first few examples will be for demonstrating how the parameters work, the fun ones will be at the bottom.

image to be used in Filestack collage examples

Collage with color set to black with default and dimensions of 640x480

collage=files:[6a9QVg1LS4uoPN7B4HYA,WmOJgubRRiRtLR9UGGJc,rFGjD9dYSLy8vh7zLDOm,Pdqi7OzHR3CitiGD41kT,v1pxY2fnSBqqkehMsbq6],w:640,h:480,c:black
example collage built with Filestack image transformations using black border color and set dimensions

Example of how the width parameter take precedence over the height parameter. The image produced here will be 100 pixels wide, but not 2000 pixels tall

collage=files:[0ZgN5BtJTfmI1O3Rxhce,6a9QVg1LS4uoPN7B4HYA,WmOJgubRRiRtLR9UGGJc,rFGjD9dYSLy8vh7zLDOm,Pdqi7OzHR3CitiGD41kT,v1pxY2fnSBqqkehMsbq6],w:100,h:2000,c:black
example collage built with Filestack image transformations with a very large height setting

Example with width greater than the height

collage=files:[0ZgN5BtJTfmI1O3Rxhce,6a9QVg1LS4uoPN7B4HYA,WmOJgubRRiRtLR9UGGJc,rFGjD9dYSLy8vh7zLDOm,Pdqi7OzHR3CitiGD41kT,v1pxY2fnSBqqkehMsbq6],w:1000,h:200,c:black
example collage built with Filestack image transformations with a width of 1000 pixels

Main Image

main photo to be used in a Filestack image transformation collage example

Collage of interesting photos using an external URL as the main image

collage=files:[9K1BZLt6SAyztVaOtAQ4,FWOrzDcpREanJDI3hdR5,Vi6RUEi6TgCSo9FXYVxP,vLlqTV2SyizyQNuAWZ65,DoYzv3hvTRmHuhgU1WTh,YsO0ITnNRMSXLhHckFfR],width:1450,height:900
example collage built with Filestack image transformations using one external url and several photos uploaded with Filestack

photos courtesy of Mike Mozey


Collage of photos using fit:crop

The image above used the default fit set by the system and it produced and image that is 1450x738. The image generated using the same parameters and fit:crop produced an image that is exactly 1450x900

collage=files:[9K1BZLt6SAyztVaOtAQ4,FWOrzDcpREanJDI3hdR5,Vi6RUEi6TgCSo9FXYVxP,vLlqTV2SyizyQNuAWZ65,DoYzv3hvTRmHuhgU1WTh,YsO0ITnNRMSXLhHckFfR],width:1450,height:900,fit:crop
example collage built with Filestack image transformations using one external url and several photos uploaded with Filestack using fit:crop

Collage of photos demonstrating the autorotate:true parameter

The following collage URL shows what it looks like when the images in the collage are not auto-rotated and the images display with their natural orientation

example collage built without using autorotate

The following collage URL shows what it looks like when the images in the collage are auto-rotated

example collage built without using autorotate

Here's an example where the account used to make the conversion is secure, one of the handles in the array is secure (the red bike), and the main image (the red bike) is secure.

In this case the transformation must be signed and the image of the bicycle must be signed in both places it is used. If you are using secured Filestack urls, then your collage url will get a bit long (note: most browsers have a 2000 character limit for URL size).

collage example demonstrating how to generate a collage when using Filestack's security settings