How to insert images dynamically into multiple columns ?

Carbone v2, v3, and v4 currently require pre-formatted JSON datasets for dynamic picture injection into multiple columns.



Format Your JSON Data:

The only solution for the moment is to pre-format your JSON data-set with a list of a two pictures per object (or more if you have more columns), such as:

{
  list: [
   { 
      "img1": "Picture 1 URL",
      "img1Title": "Picture 1 Title",
      "img1Desc": "Picture 1 Description",
      "img2": "Picture 2 URL",
      "img2Title": "Picture 2 Title",
      "img2Desc": "Picture 2 Description"
   },
   { 
      "img1": "Picture 3 URL",
      "img1Title": "Picture 3 Title",
      "img1Desc": "Picture 3 Description",
      "img2": "Picture 4 URL",
      "img2Title": "Picture 4 Title",
      "img2Desc": "Picture 4 Description"
   },
   { 
      "img1": "Picture 5 URL",
      "img1Title": "Picture 5 Title",
      "img1Desc": "Picture 5 Description"
   }
  ]
}

Design Your Template

Create a table with 2 rows and 2 columns.
In the first cell of the first row, insert a placeholder picture with {d.list[i].img1} as alternative text.
In the second cell of the first row, insert another placeholder picture with {d.list[i].img2} as alternative text.
In the first cell of the second row, insert the end loop tag with {d.list[i+1]} to indicate the pattern for Carbone.



Generate the Document

The generated DOCX or PDF document will have each row representing an item from the list, with two pictures injected accordingly.
Picture 1 for the first row's first column.
Picture 2 for the first row's second column.
Picture 3 for the second row's first column.
Picture 4 for the second row's second column.

With the imminent release of Carbone v5.0.0 in the next couple of months, it will soon be feasible to create this design directly within the template file, eliminating the need for pre-formatting your JSON.

Updated on: 02/26/2024