Image Card

Card type: image

Data type of variable: str (URL of image)

The image card allows you to display and manage images in your deck.

To upload an image, click the upload button, or drag and drop an image onto the card. The image will be uploaded to the DataCards instance and the connected variable will be set to the URL of the image. Alternatively, the URL can be set programmatically (see example below).

In addition to the common parameters and the input card parameters, the image card has the following configuration options:

Name	Type	Required	Description
`alt_text`	str	No	Alternative text description for the image.
`options`	dict	No	Object containing display options.
`options.fit`	str	No	How the image should fit within its container. Options: `'cover'`, `'contain'`, `'fill'`, `'none'`, `'scale-down'`. See CSS `object-fit` for more details.
`options.opacity`	float	No	Image opacity from 0 to 1 (default: 1).
`fill_card`	bool	No	When set to `True`, the image will fill the entire card space including the header area. When `False` (default), the image will be positioned below the header.

Examples

Basic image card

Ready to upload an image.


datacards.publish.card(
    type='image',
    label='Image',
    alt_text='Image description',
    options={
        'opacity': 1,
        'fit': 'cover',
    },
    logic_view_size=(4,2),
    variable_key='my_variable_key',
    fill_card=False
)

Set the URL programmatically


image_url = "https://picsum.photos/200/300"
 
if image_url:
    datacards.publish.variable("my_variable_key", image_url)


datacards.publish.card(
    type='image',
    label='Image',
    alt_text='Image description',
    options={
        'opacity': 1,
        'fit': 'cover',
    },
    logic_view_size=(4,2),
    variable_key='my_variable_key',
    fill_card=False
)

Full card image

An image that fills the entire card space, including the header area.


datacards.publish.card(
    type='image',
    label='Image',
    alt_text='Image description',
    options={
        'opacity': 1,
        'fit': 'cover',
    },
    logic_view_size=(4,2),
    variable_key='my_variable_key',
    fill_card=True
)