Adding logos and images to Views
You can add logos and images to your Studio Views using the Image component, enabling you to add branding and visual enhancements to your content. You can also customize your image style by choosing options including the fit, background, alignment, labels, and alt text.
In this example, we've added the Celonis logo to our Process Cockpit app:
 |
Adding logos to Views
The Image component automatically displays your Celonis Platform team logo where one is available. This logo is managed in the Admin & Settings area, requiring administration permissions for your Celonis Platform team.
To add your team logo to your View while in Edit mode:
Drag and drop the Image component to the View.
Click Logo and your team logo is automatically added to your View.
Choose your logo style:
Background: Choose whether the logo is on a white background or a transparent one.
Caption: Add a text based caption to the logo, displayed centrally underneath the image.
Alt text: Add a description or further details about the logo, helping screen readers to describe the image to users with visual impairments. This alt text isn't displayed in the view.
 |
To learn more about changing your team logo as an team admin, see: Updating your team name and logo.
Adding images to Views
You can add hosted images to your enhanced Studio Views, enabling you to add branding and visual enhancements to your content. You can also customize your image style by choosing the fit, background, alignment, labels, and alt text.
When adding images to your Views, the following apply:
Source: Images must be available on a public URL, meaning that they can be accessed without credentials or through specific environments.
Formats: Images must be either JPEG, PNG, SVG, or GIF format.
To add a hosted image to your Studio View while in Edit Mode:
 |
Drag and drop the Image component to the View.
Add the image source and ensure that the image preview has loaded in your View.
If no image is displayed, try accessing the URL through your browser and see if the image loads.
Choose your image style:
Fit: This is how the image fits into the size and shape of the component (which can be changed by dragging the blue outline to your ideal size). You can then choose between fit, scretch, and crop.
Alignment: This controls where the image is placed within the component, with the default being centered.
Background: Choose whether the image is on a white background or a transparent one.
Caption: Add a text based caption to the image component, displayed centrally underneath the image.
Alt text: Add a description or further details about the image, helping screen readers to describe the image to users with visual impairments. This alt text isn't displayed in the view.