Layouts
All six widget layout types and their configuration options.
Vizco supports six layout types, each with its own configuration data class. The layout is set when creating or updating a widget via the API.
Carousel
A horizontally paged image carousel with optional autoplay, dots indicator, and navigation arrows.
| Name | Type | Default | Description |
|---|---|---|---|
autoplay | Boolean | false | Automatically advance pages |
autoplay_speed | Long | 3000 | Autoplay interval in milliseconds |
show_arrows | Boolean | true | Show left/right navigation arrows |
show_dots | Boolean | true | Show page indicator dots |
infinite | Boolean | true | Loop back to the first image after the last |
transition | String | slide | Transition type: slide or fade |
aspect_ratio | Float? | null | Fixed aspect ratio (e.g. 1.78 for 16:9). Null uses image dimensions. |
{
"autoplay": true,
"autoplay_speed": 4000,
"show_dots": true,
"infinite": true,
"transition": "slide"
}Grid
A fixed-column grid layout with configurable gap and aspect ratio.
| Name | Type | Default | Description |
|---|---|---|---|
columns | Int | 2 | Number of columns |
gap | Int | 8 | Gap between items in DP |
aspect_ratio | Float? | null | Fixed aspect ratio for all items |
object_fit | String | cover | How images fit: cover, contain, or fill |
{
"columns": 3,
"gap": 12,
"aspect_ratio": 1.0,
"object_fit": "cover"
}Masonry
A staggered grid layout where each item preserves its natural aspect ratio, creating a Pinterest-style layout.
| Name | Type | Default | Description |
|---|---|---|---|
columns | Int | 2 | Number of columns |
gap | Int | 8 | Gap between items in DP |
{
"columns": 2,
"gap": 8
}Slider
A full-width single-image slider with optional counter overlay and navigation arrows. Similar to carousel but shows one image at a time with a counter instead of dots.
| Name | Type | Default | Description |
|---|---|---|---|
autoplay | Boolean | false | Automatically advance slides |
autoplay_speed | Long | 3000 | Autoplay interval in milliseconds |
show_arrows | Boolean | true | Show navigation arrows |
show_counter | Boolean | false | Show slide counter (e.g. 1/5) |
transition | String | slide | Transition type: slide or fade |
aspect_ratio | Float? | null | Fixed aspect ratio |
{
"autoplay": true,
"show_counter": true,
"transition": "fade"
}List Vertical
A vertically scrolling list of images with optional captions.
| Name | Type | Default | Description |
|---|---|---|---|
gap | Int | 8 | Gap between items in DP |
show_caption | Boolean | false | Show image filename as caption |
max_width | Int? | null | Maximum width constraint in DP |
{
"gap": 16,
"show_caption": true,
"max_width": 600
}List Horizontal
A horizontally scrolling list of images with configurable item width and optional scroll snapping.
| Name | Type | Default | Description |
|---|---|---|---|
gap | Int | 8 | Gap between items in DP |
item_width | Int? | null | Fixed item width in DP. Null defaults to 160dp. |
scroll_snap | Boolean | false | Snap to item boundaries when scrolling |
{
"gap": 12,
"item_width": 200,
"scroll_snap": true
}Setting the layout via API
The layout and config are set when creating or updating a widget:
{
"name": "Product Gallery",
"slug": "product-gallery",
"assetIds": ["550e8400-...", "660e8400-..."],
"layout": "MASONRY",
"config": {
"columns": 3,
"gap": 8
}
}Valid layout values: CAROUSEL, GRID, MASONRY, SLIDER, LIST_VERTICAL, LIST_HORIZONTAL.