[CS1] Add Image Grid
Place row, or column, or grid of images on your component. These are all the properties of Add Image Grid and what they do:
NOTE: For image grid to work correctly all the images in your grid should be the same size.
Basic Properties
Name
A label that you can use to easily identify this step.
Image URL n
A URL to an image that you wish to place. The n represents which image in the list you are setting. You can have up to 20 images in the grid.
You can specify a color like "blue" or "#0000ff" instead of a URL. In that case it will draw a square of that color instead of an image. This is useful if you don't have images yet.
Centered
Flipping this switch will center vertically and horizontally center the icons within the bounding box defined by Width and Height.
Resize X
The width of the image as you would like it to be. If both this and Resize Y are zero, then we will not scale the image. If this is a number greater than 0 and Resize Y is 0 then we will scale the image proportionally.
Resize Y
The height of the image as you would like it to be. If both this and Resize X are zero, then we will not scale the image. If this is a number greater than 0 and Resize X is 0 then we will scale the image proportionally.
Position X
A number between 0 (left side) and the width of the component that you are designing for (right side).
Position Y
A number between 0 (top) and the height of the component that you are designing for (bottom).
Width
A number between 0 and the width of the component. This will set the bounding box where the images will be drawn. By setting the width to the width of a single image in the grid, you can create a column of images.
Height
A number between 0 and the height of the component. This will set the bounding box where the images will be drawn. By setting the height to the height of a single image in the grid, you can create a row of images.
Advanced Properties
Invert Colors
Flipping this switch will cause the colors in the image to reverse, like a negative image. So white will become black and vice versa.
Outline Grid Area
Draws an outline around the bounding box that contains the grid, so you can more easily see where the images in the grid will be placed.
Opacity
A number between 0 and 100 that represents how translucent this step will be. 0 means that it will be fully invisible (or transparent). 100 means that it will be fully visible (or opaque).
Rotate
A number between 0 and 360. It represents the degrees that this step will be rotated. Rotation is done via the center point.
Conditionally Render
Allows you to turn off this step programatically. If this field has any contents, then it will be processed by the template engine. If after processing the field has any value other than empty or 0, It will render. If it is empty or 0, it will not render, much the same as if you had disabled it.