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.

circle-info

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=truearrow-up-right Editor: https://bubble.io/page?type=page&name=image_loop&id=docxtopdfplugintest&tab=tabs-2arrow-up-right

Template

Result

➡️

Last updated