Image Transform — imageTransform
Overview
- Type:
imageTransform
- Output Value:
string: the path to the image
A virtual control to transform any image.
Image transforms give developers access to all the image editing functionality within Stacks, but fully controlled by the developer. You can scale, rotate, and apply borders and shadows.
Image transforms can take an image well or an %image% stack as input. Many transforms can be applied to the same image (e.g., to output several different sizes of an image).
Image transforms are especially useful for creating thumbnail images that must be small and cropped to a specific dimension.
Available: Stacks API v3
ID
- Key:
id
- Type:
string
- Required
The ID for this control. This ID must be unique within this stack. The ID is used to refer to the control's property. IDs should be alpha-numeric (dashes and underscores are allowed), but should not contain special characters.
Scale Mode
- Key:
imageScaleMode
- Type:
Number
- Default Value:
0 (Scale to Fit)
The scale mode defines how the image is cropped to fit within the specified scale, width, and height. To get a visual idea of how these modes works, double click an image in Stacks and adjust the scale settings there.
- 0 — Scale to Fit — The image will be scaled proportionally until its entire contents fits inside the max width, max height, or the scale percent. The largest value that meets all criteria will be used.
- 1 — Scale to Fill — The image will be scaled proportionally until either the height or the width fills the entire specified height or width. The other dimension will be cropped. This produces an image that is exactly the specified dimensions and is completely filled with the input image. In this mode the Scale will not be used.
- 2 — Stretch to Fill — The image width and height will be stretched until they exactly fill the given width and height. In this mode the Scale will not be used.
- 3 — Center (no scaling) — The input image will be centered inside an output image of the specified dimensions. If the input image is smaller than the specified dimensions, transparent/white will be filled in around the image. If the input image is larger than the specified dimensions, then it will be cropped.
Scale
- Key:
imageScale
- Type:
Number
- Default Value:
100
When the Scale Mode property is set to 1 (Scale to Fill), you may either define a scale percent, width/height maximums, or both. If both or set, then the Max Width and Max Height properties take precidence.
Max Width
- Key:
imageMaxWidth
- Type:
Number
The Max Width will add a maxium width contraint to the image. This constraint is only applied if the value is non-zero and the Max Width Enable property is enabled. This contraint will take precedence over other properties (such as the Scale property.)
Max Height
- Key:
imageMaxHeight
- Type:
Number
The Max Height will add a maxium height contraint to the image. This constraint is only applied if the value is non-zero and the Max Height Enable property is enabled. This contraint will take precedence over other properties (such as the Scale property.)
Max Width Enable
- Key:
imageMaxWidthEnable
- Type:
Boolean
- Default Value:
Disabled
Enabling the Max Width will add the maxium width contraint to the image specified in the Max Width property. This contraint will take precedence over other properties (such as the Scale property.)
Max Height Enable
- Key:
imageMaxHeightEnable
- Type:
Boolean
- Default Value:
Disabled
Enabling the Max Height will add the maxium height contraint to the image specified in the Max Height property. This contraint will take precedence over other properties (such as the Scale property.)
Rotation
- Key:
imageRotation
- Type:
number
- Default Value:
0
The amount of rotation (in degrees) to rotate the image. The rotation is not done in CSS. The image is rotated and rerendered. Note that image rotations of just a few degrees, especially of smaller images, can lead to artifacts.
Border Width
- Key:
imageBorderWidth
- Type:
number
The width of the border. Borders are rendered into the image (not CSS).
Border Color
- Key:
imageBorderColor
- Type:
string: HTML RGB Hex string
The color of the border. Borders are rendered into the image (not CSS).
Shadow Color
- Key:
imageShadowColor
- Type:
string: HTML RGB Hex string
The color of the shadow. Light colors can be used for a glow effect. Shadows are rendered into the image (not CSS).
Shadow Opacity
- Key:
imageShadowColor
- Type:
string: HTML RGB Hex string
The opacity of the shadow. Opacity of `0` is fully transparent and will disable the shadow. Shadows are rendered into the image (not CSS).
Shadow Blur
- Key:
imageShadowColor
- Type:
string: HTML RGB Hex string
The amount of blur added to the shadow. Shadows are rendered into the image (not CSS).
Shadow Offset X
- Key:
imageShadowColor
- Type:
string: HTML RGB Hex string
The offset of the shadow in the horizontal direction. Shadows are rendered into the image (not CSS).
Shadow Offset Y
- Key:
imageShadowColor
- Type:
string: HTML RGB Hex string
- Default Value:
Black
- Required
The offset of the shadow in the vertical driction. Shadows are rendered into the image (not CSS).