Image Widget

The image widget allows you to embed an image on your dashboard. An image can be a PNG, JPG, or animated GIF, hosted where it can be accessed by URL.

Setup

Image setup
  1. Enter your image URL.
  2. Choose an appearance:
    • Zoom image to cover whole title
    • Fit image on tile
    • Center image on tile

API

This widget can be used with the Dashboards API. See the following table for the widget JSON schema definition:

Expand All

Field

Type

Description

has_background

boolean

Whether to display a background or not.

default: true

has_border

boolean

Whether to display a border or not.

default: true

horizontal_align

enum

Horizontal alignment. Allowed enum values: center,left,right

margin

enum

Size of the margins around the image. Note: small and large values are deprecated. Allowed enum values: sm,md,lg,small,large

sizing

enum

How to size the image on the widget. The values are based on the image object-fit CSS properties. Note: zoom, fit and center values are deprecated. Allowed enum values: fill,contain,cover,none,scale-down,zoom,fit,center

type [required]

enum

Type of the image widget. Allowed enum values: image

default: image

url [required]

string

URL of the image.

url_dark_theme

string

URL of the image in dark mode.

vertical_align

enum

Vertical alignment. Allowed enum values: center,top,bottom

{
  "has_background": true,
  "has_border": true,
  "horizontal_align": "string",
  "margin": "string",
  "sizing": "string",
  "type": "image",
  "url": "https://example.com/image.png",
  "url_dark_theme": "https://example.com/image-dark-mode.png",
  "vertical_align": "string"
}

Further Reading

Additional helpful documentation, links, and articles:

PREVIEWING: rtrieu/product-analytics-ui-changes