Gallery of images

Objectives

Create a gallery of images with the following features:

• display an array of images,
• set a fixed number of columns,
• ensure each image fits perfectly within its cell.

Solution

Since all images are stored at the same level in the JSON array, and the goal is to display them in a fixed number of columns (with as many rows as needed), the solution is to restructure the JSON with appropriate Carbone tags in the template and then display it properly.

Here’s how to construct a template to achieve this with Carbone:

1. Define the hypothesis to restructure the JSON

   • Consider the cumulative count of entries with the :cumCount() formatter,
   • Divide this count by the number of columns you want to display per row (e.g., 2) with the :div() formatter,
   • Round the result up to the nearest whole number with the :ceil formatter.
   • Store the result in a new variable, with the :set() formatter.

   Example: {d.image[]:cumCount():div(2):ceil:set(.rowNb)}

2. Transform the JSON with a single Carbone tag in the template

   Group all objects that will be printed on the same row because they share the same rowNb value in a new array, using the :set() formatter

   Example: {d.image[]:set(d.group[id=.rowNb].pictures[])}

JSON Before
{
  "image": [
    { "pic": "a" },
    { "pic": "b" },
    { "pic": "c" },
    { "pic": "d" }
  ]
}

JSON after

{
  "image": [
    { "pic": "a", "rowNb": 1 },
    { "pic": "b", "rowNb": 1 },
    { "pic": "c", "rowNb": 1 },
    { "pic": "d", "rowNb": 1 }
  ],
  "group": [
    { "id": 1, "pictures": [
        { "pic": "a", "rowNb": 1 },
        { "pic": "b", "rowNb": 1 }
      ]
    },
    { "id": 2, "pictures": [
        { "pic": "c", "rowNb": 2 },
        { "pic": "d", "rowNb": 2 }
      ]
    }
  ]
}

3. Insert a placeholder

   • Create a 2x2 table.
   • Insert a temporary image into the first cell. This image will act as a placeholder for Carbone to display the actual images.
   • Right click on the temporary images, then go to View Alt Text menu
   • Insert the appropriate Carbone tag to display the image, (e.g., {d.group[i].pictures[i].cat} )
   • Use the :imageFit formatter to resize the image so it fits its container

   Example: {d.group[i].pictures[i].cat:imageFit(contain)}

4. Define the Horizontal Repetition

   Use the iterator [i+1] in the second cell of the first row to define the horizontal iteration

   Example: {d.group[i].pictures[i+1]}

5. Define the Vertical Repetition

   Use the iterator [i+1] in the first cell of the second row to define the vertical iteration

   Example: {d.group[i+1]}

And there you go!

Layout

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

You might also like