Loops in columns + lines (grids)
If you have a list of items which you want to display in multiple columns and multiple lines, you may use our columns features.
Example data :
{"images": [
{
"title": "Shirt",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjHWwPvOYKj1hg5y1UdGQw1RbG9HpKwpOZmw&s",
"description" : "red, long sleeves"
},
{
"title": "Dress",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjHWwPvOYKj1hg5y1UdGQw1RbG9HpKwpOZmw&s",
"description" : "blue and green"
},
{
"title": "trousers",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTjHWwPvOYKj1hg5y1UdGQw1RbG9HpKwpOZmw&s",
"description" : "blue jeans"
}
]
}
In your template, you have to add Col1, Col2, Col3 to each one of your variables, as shown below:
{#images}{%imageCol1}
{titleCol1}
{descriptionCol1}
{%imageCol2}
{titleCol2}
{descriptionCol2}
{%imageCol3}
{titleCol3}
{descriptionCol3}{/images}
And in addition to that you have to provide the number of columns in the plugin JSON data, like this: "images.nbColumns" :3, Then just create your JSON loop as usual. You can see a demo on this page : https://docxtopdfplugintest.bubbleapps.io/version-test/image_loop?debug_mode=true Editor: https://bubble.io/page?type=page&name=image_loop&id=docxtopdfplugintest&tab=tabs-2
Template
Result
➡️
Last updated