Images Composition URL API

To use Image Composition, simply specify multiple src parameters in your URL, each representing a different image. Each src parameter can have its own set of image transformation parameters, such as resizing or cropping, which are prefixed with an underscore _. This allows you to apply specific transformations to each individual image before they are combined.

For example, to apply the rounded parameter to the first src, you would use _rounded=10. This way, each src can have its own set of image parameters, allowing you to create unique and customized image compositions.

It's important to note that the image parameters for each src are independent and won't affect the other images in the composition. Additionally, not all parameters are applicable to compositions.The ones that are applicable will be applied to each image in the composition individually.

The layout parameter is used in conjunction with the image compositions feature on our CDN, and it determines how multiple images will be arranged in a single image. There are five layout options available:

• rows (default): This layout arranges the images in a row, left to right. The height of each row will be the height of the tallest image in that row, and the width of the row will be the sum of the widths of all images in that row.
• columns: This layout arranges the images in a column, top to bottom. The width of each column will be the width of the widest image in that column, and the height of the column will be the sum of the heights of all images in that column.
• columns-bottom: This layout is similar to columns, but the images are aligned to the bottom of the column instead of the top.
• columns-center: This layout is similar to columns, but the images are vertically centered in the column.
• columns-top: This layout is similar to columns, but the images are aligned to the top of the column instead of the bottom.

By using the layout parameter, you can create custom image compositions with different arrangements of images, depending on your needs.

The layoutFillColor parameter is used in conjunction with the image composition feature to specify the color that fills the empty space between images when usingthe columns or rows layout modes.

By default, when composing images in rows or columns, the layout parameter is set to rows and the empty spaces are transparent. However, with the layoutFillColor parameter, you can specify a color to fill the empty spaces between images.

The layoutFillColor parameter can be set to black, white, or transparent (which is the default). If black or white is selected, the empty spaces between images will be filled with the respective color.

The layoutGap parameter is used in image compositions to specify the gap, in pixels or percentage, between the images in the composition. It is available for all layout options, including rows and columns.

The value for layoutGap can be an absolute number, such as layoutGap=5 (default value), which will set a fixed gap of 5 pixels between images, or a relative number, such as layoutGap=5.0, which will set a gap equal to 5% of the width or height of the images, depending on the layout direction.

For example, if you have a row layout with three images and a layoutGap=5, there will be a fixed gap of 5 pixels between each image. Alternatively, if you have a column layout with two images and a layoutGap=5.0, the gap between the images will be 5% of the height of the images.

The layoutMaxCols is a parameter that can be used in image compositions on our CDN.By default, the layoutMaxCols value is 3, which means that images will be arranged in a maximum of three columns.

This parameter can be useful when you have a large number of images and want to make sure they are arranged in a certain way. For example, if you have six images and want them arranged in two columns, you can set layoutMaxCols to 2 and the images will be arranged in two columns instead of three.

Keep in mind that layoutMaxCols is a maximum value, and the actual number of columns in the layout may be less than this value if there are not enough images to fill all the columns.

The layoutMaxRows is a parameter that can be used in image composition to limit the number of rows that can be created. By default, the maximum number of rows is not limited, but if you set layoutMaxRows to a number, the composition will not exceed that number of rows.

For example, if you set layoutMaxRows=2 and provide 6 image sources, the images will be composed into a 2-row layout with 3 images in each row. The remaining images will be discarded.

It's important to note that if the number of images is not evenly divisible by the number of columns, the last row may have fewer images than the other rows. If you want to ensure that each row has the same number of images, you can set the layoutForceWidth parameter to a value that will ensure that each image has the same width, regardless of its original aspect ratio.

The layoutMinRows parameter is used in image compositions to set the minimum number of rows in the output image. When the layout parameter is set to a value other than rows, the number of rows in the output image is determined by the number of source images and the dimensions of those images. However, in some cases, it may be desirable to ensure that the output image always has a certain minimum number of rows, even if there are only a few source images.

For example, setting layoutMinRows=2 will ensure that the output image always has at least two rows, even if there is only one source image. If there are two or more source images, the output image will have the number of rows determined by the layout parameter and the dimensions of the source images.