Image component
Overview
Placement | or |
Required KM objects | -- |
Introduction to Images
Use the "Image" component on (Profile) Views to embed relevant images for your users. It can be used to display a company logo or any other image.
 |
Basic configuration
Please find below an example of the most basic configuration of an "Image" component:
Attribute | Required | Type | Description |
|---|---|---|---|
src | true | URL | Defines the URL path to an image. Images are supported in the formats .png, .jpg, or .gif. InfoCurrently, it's not possible to upload the image directly to the Celonis Server. Therefore we recommend using any other hosting server. When you use Dropbox for this just make sure to append raw=1 to the URL e.g. https://dropbox.com/yourimageurl.png?raw=1 |
Info
optimised for component editor
View
id: image type: image settings: src: https://mk0lemarkfrqvciop01u.kinstacdn.com/wp-content/uploads/Your-Image-Here-1.jpg
Advanced Configuration
In addition to the basic configuration, the following additional configuration options are also available.
Attribute | Required | Type | Possible values | Default Value | Description |
|---|---|---|---|---|---|
width | false | String | image width | Defines the image width in pixel (px) or percentage (%). | |
height | false | String | image height | Defines the image height in pixel (px) or percentage (%). | |
alt | false | String | - | empty | Defines the alternative image name, which is displayed if the image can not be rendered. |
styles | false | Defines the different styles you can apply to the component. | |||
position | false | Defines that the position within the given layout. | |||
horizontal | false | Enum | full left center right | full width | Defines the horizontal position within the given layout. |
vertical | false | Enum | top center bottom | bottom | Defines the vertical position with the given layout. |
Info
optimised for component editor
View
id: image
type: image
settings:
src: https://mk0lemarkfrqvciop01u.kinstacdn.com/wp-content/uploads/Your-Image-Here-1.jpg
width: 200px
height: 100%
alt: globe
styles:
position:
horizontal: center
vertical: bottom