banner_grid

container of banners which displays a grid of banner with a label and variable height and width. The children blocks of this Layout Block are typically meant to be banner Layout Blocks.

Picture:

To make the children block simple to configure, we recommend that the layout size differences are part of the configuration of the banner_grid. In the example, we have a list of elements in the parameter “grid” which indicate the number of cols and rows for each element per device (considering a typical 16 cols grid framework like Bootstrap).

To have the same result as in the picture, the grid would need to be:

[
  {
    "col": 12,
    "col-sm": 12,
    "col-md": 6,
    "col-lg": 6,
    "rows": [
      {
        "col": 12,
        "col-sm": 12,
        "col-md": 12,
        "col-lg": 12,
        "rows": []
      },
      {
        "col": 12,
        "col-sm": 12,
        "col-md": 6,
        "col-lg": 6,
        "rows": []
      },
      {
        "col": 12,
        "col-sm": 12,
        "col-md": 6,
        "col-lg": 6,
        "rows": []
      }
    ]
  },
  {
    "col": 12,
    "col-sm": 12,
    "col-md": 6,
    "col-lg": 6,
    "rows": []
  }
]

We recommend to loop through the structure to define automatically the order of the banner index, which would do a mapping like this (the number beint the index of the banner in the children block:

1		4
2	3

{
  "title": "Banner Grid",
  "type": "object",
  "definitions": {
    "row": {
      "type": "object",
      "properties": {
        "col": {
          "type": "number",
          "description": "extra small devices - screen width less than 576px"
        },
        "col-sm": {
          "type": "number",
          "description": "small devices - screen width equal to or greater than 576px"
        },
        "col-md": {
          "type": "number",
          "description": "medium devices - screen width equal to or greater than 768px"
        },
        "col-lg": {
          "type": "number",
          "description": "large devices - screen width equal to or greater than 992px"
        },
        "rows": {
          "type": "array",
          "title": "Children Rows",
          "items": {
            "$ref": "#/definitions/row"
          }
        }
      }
    }
  },
  "properties": {
    "title": {
      "type": "object",
      "title": "Label",
      "properties": {
        "de": {
          "type": "string",
          "description": "value for German"
        },
        "fr": {
          "type": "string",
          "description": "value for French"
        }
      }
    },
    "grid": {
      "type": "array",
      "title": "Grid Layout",
      "items": {
        "$ref": "#/definitions/row"
      }
    },
    "accessor": {
      "type": "string",
      "description": "hits accessor (typically leave empty)"
    }
  }
}

Complete Layout Block: