Add Image

Place an image on your component. These are all the properties of Add Image and what they do:

Basic Properties

Name

A label that you can use to easily identify this step.

Image URL

A URL to an image that you wish to place. You can use a URL of an image you uploaded to Component Studio's Images and Icons section, or a URL from anywhere on the web.

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).

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.

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.

Blend

How this step should be combined with the steps that came before it.

Arron Gresham has a great tutorial on this feature.

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.

Iconify

Allows you to make backgrounds transparent and colorize an image.

Still need help? Contact Us Contact Us