Welcome, Guest Login

Support Center

Image Block

Last Updated: Apr 01, 2014 10:01PM EDT

Inline image


Drag this block into your app and then you can edit it's settings by right clicking on the block with your mouse.

Version: 4.00
The Image Block allows you to add images to your app. Images can come from your app's Media Folder or from a Data Source.

You can specify loading and placeholder images for when your image comes from a Data Source, and customize the look of images in many other ways using the properties in the Image Block's Specifics tab.


Caption Background Color The background color of the image caption.
Image Source The image file.
Caption Border Color The border color of the caption area. Defaults a mid-level grey with alpha (#66666699)
Caption Font The font and color for the image caption.
Corner Radius A number specifying the amount of rounding of the image corners. A larger number will cause more rounding. If the value is zero, the corners will be square.
Badge Position The position of the badge relative to the image. Supplied values are offsets from the appropriate edge of the image. Either one or two adjacent values should be provided. For example, if the top value is 10 and the left value is 0, the badge will be aligned to the left edge of the image and 10 points from the top of the image (top-left corner). Right and Bottom values are moved left and upward respectively from the corresponding edge. All values should be positive. If only one value is supplied, that will be the offset from the appropriate edge. The badge will be cenetered on the unspecified axis. Example, a Top value of 0 will align the badge horizontally centered and adjacent to the top edge.
Placeholder Image The image to be loaded used if the image can't be loaded.
Caption Horizontal Inset This is the padding on the left and right of the caption frame. Default is 10.
Caption Horizontal Alignment Alignment for caption in the caption frame. Default is Center
Appearance Animation An animation to apply when the block first appears.
Overlay Image An image that will overlay the Image Source
Badge Font Spec Font to use for the badge text.
Badge Background Image The background image to use for the badge. If not supplied a standard treatment will be used. This should be an N-Patch image for best results.
Caption This expression is the source for the caption.
Border Color The color of the border, if the border width is not zero.
Loading Image The image displayed when the image is being loaded from a URL.
Badge Data Source If supplied, this should be the data source to monitor for new items to display in the badge.
Caption Corner Radius The corner radius for the caption background. Defaults to 5.
Caption Position Where the caption appears over the image.
Border Width The width in points of the line border around the image.
Resize To Fit If checked, the block will resize to fit its content. This should only be used when this block is within a Layout block, which will adjust its size when this block reports its new size.
Appearance Animation Scaling A time scaling multiplier to apply to the animation. Defaults to 1.0. Values greater than 1 will slow down the animation effect. Values between 0 and 1 will speed up the effect. (A scaling of .5 would play the animation twice as fast. A scaling of 2 would play the effect over twice the default amount of time.)
Green Screen Mask An image onto which the source image will be composited. Any green pixels (#00FF00) in this image will be substituted with the corresponding pixel in the source image. The bounds of the area where the image composting takes place is defined by the bounds of the mask image that contain any true green pixels. The alpha of the mask image is preserved, so any alpha-based effects (feathering, fading, etc.) in the mask will be preserved in the final composited image.
Caption Number of Lines The number of lines allowed in the caption. Defaults to 1.
Caption Border Width The border width of the caption border. Defaults to 1 point.
Badge Value An expression to show as the value of the field. If this is empty, only the number is displayed.


Before Draw, Tap

Help us improve! Rate this article:

Yes I found this article helpful

Ask a Question   

seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found