|Overview||Each Image component lets you display a single image in a Klip.
With the Layout Grid component, you can arrange multiple Image components in a single Klip.
Individual images can be customized according to your preferences.
The image can come from a URL, XML/JSON data source or an RSS feed.
Adjust component height
The Image component lets you display a single image in a Klip on your dashboard. With the Layout Grid component, you can arrange multiple Image components in a single Klip. Custom settings control how each image is displayed.
This component is also useful for data feeds like traffic cameras or webcams. Note that many component types support using Image URLs.
To add an image:
- Click Image in the component hierarchy and select the Data tab.
- Either select Insert Literal String or number and type a URL or select Insert data from a data source and select a URL from a data source. See Image URLs for more details.
This section provides examples of different ways to use the Image component.
Customizing images using the Properties panel
You can use the Properties tab to customize the height, width and position of an image.
- Click Image in the component hierarchy and select the Properties tab. Options include:
Specify a height for the Image component.
Options include from Small to Very Large, or Custom.
Select a resize option for the image.
|Align:||Specify how the image is aligned by selecting left, center, top, and bottom. If parts of the image are cut off due to other settings, alignment settings may show different parts of the image in the Image component.|
|Auto-Update:||Setting an Auto-Update rate will force the component to re-download the image at the rate you choose from Never to Every 60 minutes.|
Customizing images using the Layout tab
For an image within a Layout Grid component, you can also use the Layout tab to span an image across one or more cells and set padding options.
- Click Image in the component hierarchy and select the Layout tab.
- Specify whether to span the image across one or more columns or rows.
- Customize cell width and height by specifying a number in pixels. For example, 250 px.
- Specify cell alignment by selecting top, center or bottom.
- Specify the amount of whitespace around a cell by setting Cell Padding in pixels for all sides or individually for top, left, bottom and right.
Now that you know more about the Image component, check out the following tutorial:
These articles provide an overview of important concepts for building Klips: