Setting up layout in template

Kirby 3 Questions 🤔
1

Hey, first post here, hope i’ll make it good

I can’t manage to set up a layout in my php template, i copy the code from the documentation, but my hello div is never rendered, as if my it cannot start the foreach loop…

 <?php foreach ($page->layout()->toLayouts() as $layout): ?>
    <div>hello</div>
    <section class="grid" id="<?= $layout->id() ?>">
        <?php foreach ($layout->columns() as $column): ?>
            <div class="column" style="--span:<?= $column->span() ?>">
                <div class="blocks">
                    <?= $column->blocks() ?>
                </div>
            </div>
        <?php endforeach ?>
    </section>
<?php endforeach ?>

my panel looks like this :

  layout:
    type: fields
    fields:
      images:
        type: layout
        layouts:
          - "1/3, 1/3, 1/3"
        fieldsets:
          - image
          - video

i don’t know what i should write in my css, for the .grid, .column and .blocks
Basically what i want to achieve is something of a masonry grid, that i can manipulate from the panel. I thought the layout field could be interesting, at least what it looks like in the panel is the very thing i want

Capture d’écran 2022-10-22 à 23.52.44
Capture d’écran 2022-10-22 à 23.52.441920×921 98.2 KB

Also, is it possible to limit the layout to one “row/layout” only ?

thanks very much

2

Welome :slight_smile:

Your layout field is called images so the loop should be:

 <?php foreach ($page->images()->toLayouts() as $layout): ?>

However you wil probably get an error with that as it will clash with the built in images method. you need to rename the layout. I would suggest calling it something like gallery instead.

If you only set

        layouts:
          - "1/1"
          - "1/3, 1/3, 1/3"

You will be able to pick just 1 column as well as the thirds you have already. You can set as many variations as you wish. See here Layout | Kirby CMS

3

Thank you for your answer ! it worked when i changed the name to gallery (there was indeed an error when named images). But now, how should I style the grid, columns, and block classes ? I don’t understand how they should work together.
Also, what i meant by "one row/layout) is that :

Capture d’écran 2022-10-23 à 13.42.29
Capture d’écran 2022-10-23 à 13.42.292640×324 245 KB

I wish that the “add” button weren’t available. Is that possible ? Because i want that if the client chose 3 columns layout, they only use one layout, and they don’t change to 2 columns, so the grid is never broken.

Thanks !

4

I wonder if the layout field is the right choice for your purpose. Maybe better use a files field in card layout? And no, you cannot limit the number of layouts nor the number of blocks inside the layout.

Your frontend CSS is up to you, Kirby doesn’t do that for you. CSS has different ways to create a grid (CSS grid, flexbox etc.).

5

Thanks for replying so quick !

The thing is I’d like to mix pictures that i upload and videos that I embed, so i turned to layout, but would you say files is better ? can I add filedset (image and video) to a files field ? i tried previously but couldn’t manage that (but my yml was probably not indented correctly, i’m very beginner).

and for the css part, i thought something particular was expected for the layout to work (and especially the masonry effect). But i guess i’ll try with this maybe : CSS Grid Layout Module Level 3.
i wanted to avoid importing the masonry library.

best !

6

Ah, sorry, I forgot that the videos are embeds, not local files, so a files field won’t actually work.