Kirby 4 - Layout: Seperate Column Classes

The CMS Questions
1

Hey,

I have used the new “Layout” feature in my “about.yml” Blueprint:

          layout:
            type: layout
            layouts:
              - "1/2, 1/2"
            fieldsets:
              - heading
              - text
              - image
            settings:
              fields:
                class:
                  type: text
                  width: 1/2
                id:
                  type: text
                  width: 1/2
                image:
                  label: Background image
                  type: files

I’ve added some Text and an Image:

Bild_2024-01-23_162604852
Bild_2024-01-23_162604852988×868 389 KB

I wanted to know if it is possible to give each column seperate classes? For Example:

        <section class="grid-cols-1 md:grid-cols-2 md:gap-8">
            <div class="order-last md:order-first"> </div> //This should be the left column
            <div class="order-first md:order-last"></div> //This should be the right column
        </section>
2

Do you mean user defined column classes? Or adding classes while rendering your columns in the template depending on, for example, number of columns?

3

I want to add classes while rendering the columns. Exactly what you’ve stated :slight_smile:

4

Please see documentation of the layout field: Layout | Kirby CMS

Additional useful methods:

So you can for example check if a column is the first column, last column, get the number of columns etc. And render based on this information.

1 Like