We want to achieve a simple design which includes an image and a set of vertically stacked images next to it. Using the APL designer, we came up with the following template:
{
"type": "APL",
"version": "1.0",
"theme": "light",
"import": [
{
"name": "alexa-layouts",
"version": "1.0.0"
}
],
"resources": [
{
"colors": {
"colorTextPrimary": "#000000",
"colorTextSecondary": "#000000"
},
"dimensions": {
"textSizeBody": 48,
"textSizePrimary": 27,
"textSizeSecondary": 23,
"textSizeSecondaryHint": 25
},
"strings": {
"background": "https://placehold.it/1024x600/EEEEEE",
"logo": "https://placehold.it/100"
}
}
],
"layouts": {},
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"height": "100vh",
"width": "100vw",
"items": [
{
"type": "Image",
"source": "@background",
"scale": "best-fill",
"position": "absolute",
"width": "100vw",
"height": "100vh"
},
{
"type": "Container",
"width": "100vw",
"direction": "row",
"alignItems": "center",
"justifyContent": "spaceBetween",
"paddingLeft": "5vw",
"paddingRight": "5vw",
"items": [
{
"type": "Text",
"text": "Page Title",
"color": "@colorTextSecondary"
},
{
"type": "Image",
"source": "@logo"
}
]
},
{
"type": "Container",
"width": "100vw",
"height": "80vh",
"direction": "row",
"paddingLeft": "5vw",
"paddingRight": "5vw",
"paddingBottom": "5vh",
"alignItems": "center",
"justifyContent": "center",
"items": [
{
"type": "Image",
"width": "80vh",
"height": "80vh",
"source": "https://placehold.it/800",
"scale": "best-fill"
},
{
"type": "Container",
"paddingLeft": "5vw",
"width": "180px",
"direction": "column",
"items": [
{
"type": "Image",
"source": "https://placehold.it/90",
"height": "90px",
"width": "90px",
"paddingTop": "100px"
},
{
"type": "Image",
"source": "https://placehold.it/90",
"height": "90px",
"width": "90px",
"paddingTop": "100px"
},
{
"type": "Image",
"source": "https://placehold.it/90",
"height": "90px",
"width": "90px",
"paddingTop": "100px"
}
]
}
]
}
]
}
]
}
}
When using this template on our Echo Show device, the three small images on the right are not rendered.
Is there something we are doing wrong here when using the containers or is there any other way of getting this to work?
