Gallery of images

Objectives

You want to generate a gallery of images with the following features:

• Objects are stored in an array.
• The number of columns is fixed, and as many rows are generated as needed.
• Each image fits perfectly within its cell.

Solution

Here’s how you can achieve this using Carbone:

1. Define the objects to be printed on a same row

   Divide the cumulative count of entries by the number of columns (e.g., 2) you want to display on each row (based on your layout settings). Round the result up to the nearest whole number using the ceil formatter, and store it in a new variable, :set(.rowNb).

   Here is the formula used to calculate it: {d.image[]:cumCount():div(2):ceil:set(.rowNb)}

2. Restructure the JSON

   Restructure the JSON by grouping objects that will be printed on the same row because they share the same rowNb value, using the following formula: {d.image[]:set(d.group[id=.rowNb].pictures[])}

3. Insert a temporary picture

   Draw a 2x2 table and insert a temporary picture into the first cell. This picture will be considered by Carbone to display your images.

   Use the "View Alt Text" menu of the inserted picture to add the following formula to define its display: `{d.group[i].pictures[i].cat:imageFit(contain)}

4. Define the Horizontal Repetition

   In the second cell of the first row, define the horizontal iteration to display all the columns you want.

   Use the following formula to display the pictures in the same row:
   {d.group[i].pictures[i+1]}

5. Define the Global Repetition

   In the first cell of the second row, define the global iteration to create as many rows as needed to display all the objects in your data, with: {d.group[i+1]}

And there you go!

Layout

To apply a background image to your entire page, add a beautiful image and lock its anchor in the document header. This will ensure it is repeated on all pages of the report.