Skip to main content

Celonis Product Documentation

Image component
Overview

Placement

View

or

Profile View

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.

55705894.png
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.

Info

Currently, 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