Skip to main content

How do I build Image components?

Updated

Highlights

Component Image
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.
 

 
Key Features Adjust component height
Adjust image size
Adjust vertical and horizontal placement
Specify cell padding

Overview

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.

Component Hierarchy



To add an image:

  1. Click Image in the component hierarchy and select the Data tab.
  2. Type a URL and select a URL from a data source. See Image URLs for more details.

Key Features

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.

  1. Click Image in the component hierarchy and select the Properties tab. Options include:
Component Height: Specify a height for the Image component. 
Options include from Small to X-Large, or Custom.
Image Resize:

Select a resize option for the image.

Options include:

Do not resize image

This option forces the entire image to display using its native dimensions. This often results in the image being cut off horizontally, if the width of the image is greater than the available horizontal space. If the component height is set to anything but Auto, the image may also be cut off vertically.

Resize image to ...

This option sets the image to the dimensions specified, in pixels. Aspect ratio is not maintained, if both dimensions are set to custom values.

Show the entire image

This option forces the entire image to display within the Image component dimensions. If the component height is not set to Auto, the component may have empty space above and/or below the image, or to either of both sides - depending on the alignment settings.

Fill component

This option resizes the image to fill the component, so there is no empty space. If the component height is Auto, this setting will show the entire image. If the component has a specified height, the side effect is that parts of the image may be cut off.
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.

  1. Click Image in the component hierarchy and select the Layout tab.
  2. Specify whether to span the image across one or more columns or rows.
  3. Customize cell width and height by specifying a number in pixels. For example, 250 px.
  4. Specify cell alignment by selecting top, center or bottom.
  5. 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.

Learn more:

Now that you know more about the Image component, check out the following tutorial:

Important concepts

These articles provide an overview of important concepts for building Klips:

 

Related articles