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.

The beauty of it, is that page numbers will increment automatically, and page breaks will be perfectly fitted !

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

➡️

PreviousAdding rows into a tableNextNested loops

Last updated