Learn

Grid

The grid fieldtype is a “meta” fieldtype, essentially a fieldtype full of fieldtypes. You can add as many columns as you desire of any existing fieldtypes, including the grid itself. We amusingly refer to these as Inception Grids.

The configuration settings are identical to the fields.yaml itself, nesting a fields key under the grid field. The Grid also has a few options of its own, and also respects a width option for any of the fields inside it.

the_grid:
  display: The Grid
  type: grid
  starting_rows: 2
  min_rows: 2
  max_rows: 5
  fields:
    caption:
      display: Caption
      type: text
      width: 25%
    description:
      display: Some Text
      type: textarea
      width: 50%
    animal:
      display: Pick an animal!
      type: select
      default: Elk
      width: 25%
      options:
        - Elk
        - Moose
        - Other

The Grid field creates associative arrays/lists of YAML data that can be looped through like all YAML. There are no special features or limitations.

Example template output:

{{ the_grid }}
  <div class="{{ animal|lower }}">
    {{ if animal == "Elk" }}
      <img src="/img/groovy-elk.jpg" alt="{{ caption }}">
    {{ elseif animal == "Moose" }}
      <img src="/img/lame-moose.jpg" alt="{{ caption }}">
    {{ else }}
      <img src="/img/turtle.jpg" alt="{{ caption }}">
    {{ /if }}

    {{ some_text|markdown }}
  </div>
{{ /the_grid }}

This article was last updated on September 13th, 2016. Find an error? Please let us know!