Skip to main content
{% image
    url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
    description="Sample placeholder image"
/%}

​
Examples

​
Basic Usage

{% image
    url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
    description="Sample placeholder image"
/%}

​
With Dark Mode

{% image
    url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
    dark_url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-white.png"
    description="Logo that changes in dark mode"
/%}

​
From a Data Query

{% image
    data="products"
    column="image_url"
    description_column="product_name"
/%}

​
From a Data Query with Filters

{% dropdown id="category_filter" data="products" value_column="category" /%}

{% image
    data="products"
    column="image_url"
    description="Best selling product"
    filters=["category_filter"]
    order="sales desc"
/%}

​
Attributes

​
url
string
The URL of the image. Required unless data is provided.
​
dark_url
string
The URL of the image to show in dark mode
​
description
string
Description of the image, used as alt text. Required unless description_column is provided.
​
data
string
Table or query to load the image URL from; the image updates when applied filters change
​
column
string
Column containing the image URL; the first row of the query result is displayed
​
dark_column
string
Column containing the image URL to show in dark mode
​
description_column
string
Column containing the image description, used as alt text
​
filters
array
IDs of filters to apply to the query
​
max_width
number
Maximum width of the image in pixels
​
border
boolean
default:"false"
Whether to show a border around the image
​
dither
boolean
default:"false"
Whether to apply dither effect to the image
​
align
string
default:"center"
Alignment of the imageAllowed values:
  • left
  • right
  • center
​
class
string
Additional CSS classes to apply to the image
​
refresh_interval
number
Time in seconds between automatic data refreshes (minimum 60). Overrides the page-level auto-refresh setting for this component.
​
where
string
Custom SQL WHERE condition to apply to the query. For date filters, use date_range instead.
​
limit
number
Maximum number of rows to return from the query. Note: When used with tables, limit will disable subtotals to prevent incomplete subtotal rows.
​
order
string
Column name(s) with optional direction (e.g. “column_name”, “column_name desc”)
​
qualify
string
Custom SQL QUALIFY condition to filter windowed results
​
width
number
Set the width of this component (in percent) relative to the page width