Images Composition URL API

Images composition is a powerful feature offered by our CDN that allows you to easily combine multiple images into a single image using different layouts such as rows or columns. With this feature, you can create visually appealing collages, galleries, or any other image combination you can imagine, all with a single API request.

To use images composition, you simply need to specify the layout parameter along with the images you want to combine. There are several layout options available, such as rows, columns, columns-center, columns-bottom, and columns-top. Each layout option offers different alignment and spacing options to ensure your images look just the way you want them.

When using images composition, you can also specify additional parameters such as width and height to set the size of the final image, as well as background color, padding, and rounded corners to customize the look and feel.

One of the most powerful features of images composition is the ability to use different image processing parameters for each individual image in the composition. This allows you to apply different resizing, cropping, filtering, and watermarking options to each image before they are combined, giving you complete control over the final output.

Overall, images composition are a versatile and powerful feature that can help you create stunning visual content with ease.

Please, take a look at the parameters available for image transformation in our CDN. These parameters can help you optimize and enhance your images to better suit your needs. From cropping and resizing to adding watermarks and text, there are many options available to customize your images. Take some time to explore the different parameters and see how they can benefit your website or application.


Individual Transformation Parameters

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.

Snippet


https://demo.simpleimg.io/
	?layout=columns
	&layoutGap=25
	&src=704fd435e5b891e443b722a174081d0c.jpg?_rounded=25,
		ecba06a46b878d77f9765f1b7652791d.jpg?_rounded=25,
		95d0fe0146c1df2d29e21c8b4997af31.jpg?_rounded=25,
		a17e712cde4222a13007c694bdc9b51b.jpg?_rounded=25,
		a45e2874ce11cd5bb19468f6f5f55cca.jpg?_rounded=25,
		dae027cf68c3fe8fc8313f4634da3625.jpg?_rounded=25,
		7ecbebf82eaa997c2ca97839b856965a.jpg?_rounded=25

layout="columns"

layout="rows"


stringSet Layout Mode

Layout

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.

Snippet


https://demo.simpleimg.io/
	?layout=columns
	&src=704fd435e5b891e443b722a174081d0c.jpg,
		ecba06a46b878d77f9765f1b7652791d.jpg,
		95d0fe0146c1df2d29e21c8b4997af31.jpg,
		a17e712cde4222a13007c694bdc9b51b.jpg,
		a45e2874ce11cd5bb19468f6f5f55cca.jpg,
		dae027cf68c3fe8fc8313f4634da3625.jpg,
		7ecbebf82eaa997c2ca97839b856965a.jpg

layout="columns"

layout="rows"


stringSet Layout Fill Color

Layout Fill Color

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.

Snippet


https://demo.simpleimg.io/
	?layout=columns
	&layoutFillColor=white
	&src=704fd435e5b891e443b722a174081d0c.jpg,
		ecba06a46b878d77f9765f1b7652791d.jpg,
		95d0fe0146c1df2d29e21c8b4997af31.jpg,
		a17e712cde4222a13007c694bdc9b51b.jpg,
		a45e2874ce11cd5bb19468f6f5f55cca.jpg,
		dae027cf68c3fe8fc8313f4634da3625.jpg,
		7ecbebf82eaa997c2ca97839b856965a.jpg

layoutFillColor="white"

layoutFillColor="white"


numberAdjust Layout Gap

Layout Gap

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.

Snippet


https://demo.simpleimg.io/
	?layout=columns
	&layoutGap=10
	&src=704fd435e5b891e443b722a174081d0c.jpg,
		ecba06a46b878d77f9765f1b7652791d.jpg,
		95d0fe0146c1df2d29e21c8b4997af31.jpg,
		a17e712cde4222a13007c694bdc9b51b.jpg,
		a45e2874ce11cd5bb19468f6f5f55cca.jpg,
		dae027cf68c3fe8fc8313f4634da3625.jpg,
		7ecbebf82eaa997c2ca97839b856965a.jpg

layoutGap=10

layoutGap="2.0"


numberSet Layout Max Columns

Layout Max Columns

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.

Snippet


https://demo.simpleimg.io/
	?layout=columns
	&layoutMaxCols=3
	&src=704fd435e5b891e443b722a174081d0c.jpg,
		ecba06a46b878d77f9765f1b7652791d.jpg,
		95d0fe0146c1df2d29e21c8b4997af31.jpg,
		a17e712cde4222a13007c694bdc9b51b.jpg,
		a45e2874ce11cd5bb19468f6f5f55cca.jpg,
		dae027cf68c3fe8fc8313f4634da3625.jpg,
		7ecbebf82eaa997c2ca97839b856965a.jpg

layoutMaxCols=3

layoutMaxCols=2


numberSet Layout Max Rows

Layout Max Rows

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.

Snippet


https://demo.simpleimg.io/
	?layout=rows
	&layoutMaxRows=3
	&src=704fd435e5b891e443b722a174081d0c.jpg,
		ecba06a46b878d77f9765f1b7652791d.jpg,
		95d0fe0146c1df2d29e21c8b4997af31.jpg,
		a17e712cde4222a13007c694bdc9b51b.jpg,
		a45e2874ce11cd5bb19468f6f5f55cca.jpg,
		dae027cf68c3fe8fc8313f4634da3625.jpg,
		7ecbebf82eaa997c2ca97839b856965a.jpg

layoutMaxRows=3

layoutMaxRows=2


numberSet Layout Min Rows

Layout Min Rows

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.

Snippet


https://demo.simpleimg.io/
	?layout=rows
	&layoutMinRows=2
	&src=704fd435e5b891e443b722a174081d0c.jpg,
		ecba06a46b878d77f9765f1b7652791d.jpg,
		95d0fe0146c1df2d29e21c8b4997af31.jpg,
		a17e712cde4222a13007c694bdc9b51b.jpg,
		a45e2874ce11cd5bb19468f6f5f55cca.jpg,
		dae027cf68c3fe8fc8313f4634da3625.jpg,
		7ecbebf82eaa997c2ca97839b856965a.jpg

layoutMinRows=3

layoutMinRows=4