Overlay Settings
Overlay image
https://images.contentstack.io/v3/assets/{stack_api_key}/{asset_uid}/{file_uid}/filename.jpg?environment={environment_name}&overlay={relative_URL}Additional Notes
- By default, the cropping alignment will be middle, center. See overlay-align for more details.
Note Check out the limitations that are applicable here.
The overlay parameter allows you to put one image on top of another. You need to specify the relative URL of the image as value for this parameter.
Align overlay
https://images.contentstack.io/v3/assets/{stack_api_key}/{asset_uid}/{file_uid}/filename.jpg?environment={environment_name}&overlay={relative_URL}&overlay-align={overlay-align}Note Check out the limitations that are applicable here.
The overlay-align parameter lets you define the position of the overlay image. The acceptable values for this parameter are given below:
- top: Align the overlay image to the top of the actual image
- bottom: Align the overlay image to the bottom of the actual image
- left: Align the overlay image to the left of the actual image
- right: Align the overlay image to the right of the actual image
- middle: Align the overlay image to the middle (vertically) of the actual image
- center: Align the overlay image to the center (horizontally) of the actual image
You can also specify two values for this parameter, for example ?overlay-align=left,bottom. By default, the overlay alignment is set to middle,center.
Repeat overlay horizontally
https://images.contentstack.io/v3/assets/{stack_api_key}/{asset_uid}/{file_uid}/filename.jpg?environment={environment_name}&overlay={relative_URL}&overlay-repeat={value}Note Check out the limitations that are applicable here.
Let us now try how the vertical repetition of overlay image works.
Repeat overlay vertically
https://images.contentstack.io/v3/assets/{stack_api_key}/{asset_uid}/{file_uid}/filename.jpg?environment={environment_name}&overlay={relative_URL}&overlay-repeat={value}Note Check out the limitations that are applicable here.
Now, let’s see what happens to an image when the vertical as well as horizontal repetition is enabled for the overlay image.
Repeat overlay vertically and horizontally
https://images.contentstack.io/v3/assets/{stack_api_key}/{asset_uid}/{file_uid}/filename.jpg?environment={environment_name}&overlay={relative_URL}&overlay-repeat={value}Note Check out the limitations that are applicable here.
The overlay-repeat parameter lets you define how the overlay image will be repeated on the given image. The three acceptable values for this parameter are given below:
- x: Horizontal repetition
- y: Vertical repetition
- both: Horizontal and vertical repetition
Let’s use these different parameters to understand how they work. First, try the horizontal repetition of overlay image.
Set overlay width
https://images.contentstack.io/v3/assets/{stack_api_key}/{asset_uid}/{file_uid}/filename.jpg?environment={environment_name}&overlay={relative_URL}&overlay-width={value}Additional Notes
- When width is specified in percentage, the width is relative to the output image.
- To specify a width more than 100% of the original image, use the p parameter. For example, to get a width of 250%, use overlay-width=250p.
- If the overlay image used is larger than the actual image, the overlay image will be cropped to fit the actual image.
Note Check out the limitations that are applicable here.
The overlay-width parameter lets you define the width of the overlay image. The value for this parameter can be set in pixels or percentage. For pixel value, use any whole number between 1 and 8192. For percentage value, use any decimal number between 0.0 and 0.99. When height is defined in percentage, it relative to the output image.
In order to set the overlay image width to more than 99%, use the p parameter along with the value, for example, ?overlay-width=300p. If the overlay image width exceeds the width of the image, the overlay image will be cropped.
Set overlay height
https://images.contentstack.io/v3/assets/{stack_api_key}/{asset_uid}/{file_uid}/filename.jpg?environment={environment_name}&overlay={relative_URL}&overlay-height={value}Additional Notes
- When height is specified in percentage, the height is relative to the output image.
- To specify a height more than 100% of the original image, use the p parameter. For example, to get a height of 250%, use overlay-height=250p.
- If the overlay image used is larger than the actual image, the overlay image will be cropped to fit the actual image.
Note Check out the limitations that are applicable here.
The overlay-height parameter lets you define the height of the overlay image. The value for this parameter can be set in pixels or percentage. For pixel value, use any whole number between 1 and 8192. For percentage value, use any decimal number between 0.0 and 0.99. When height is defined in percentage, it relative to the output image.
In order to set the overlay image height to more than 99%, use the p parameter along with the value, for example, ?overlay-height=300p. If the overlay image height exceeds the height of the image, the overlay image will be cropped.