Grid alignment on Kirby panel

Kirby 2 Questions 🤔
1

Hey there, I’ve build a simple asymmetric flexbox grid.
I was wondering what would be the best practice to set the width of my columns in the panel.
Right now I have to set the column width for every thumbnail in panel. But this wont work, because
I can’t realign every thumbnail whenever I am uploading a new image.

Here is the quick example of the grid how it should work/looks like:

and here is my code:

<main>
  <div class="row">
    <?php foreach($projects as $project) : ?>
    <?php foreach($project->thumbnail() as $image): ?>
    <?php if($img = $project->image($image)): ?>
    <div class="col b<?php echo $project->gridalign(); ?>">
      <div class="thumb">
        <a data-url="<?php echo $project->url() ?>" </a>
          <?php snippet('responsive_image', array('image' => $img, 'sizes' => [512, 768])) ?>
        </a>
      </div>
      <div class="projectTitle sans-m">
        <?php echo $project->title(); ?> <span class="serif-m"><?php echo $project->client(); ?></span>
      </div>
    </div>
    <?php endif ?>
    <?php endforeach ?>
    <?php endforeach?>
  </div>
</main>

So I thought if its possible to set a structure which is repeating on some point, so that I can only upload images which are aligning by themselves .

Would be super nice if someone could help me out here :sunny:

2

To get this right: Do you want to

  • have the same pattern repeat itself all the time => create an array of grid values that restarts once it is filled
  • or set a column width for each image? => add the column width to the image itself via an image field

Apart from that, the code above will not create the same pattern as in the CodePen, because your row is not within the foreach loop.

3

Oh yes… the codepen should be hoe the grid looks like, sorry for the confusion.
So I guess to create an array of grid value that restarts once it is filled, sounds like a good solution. Is there a starting point for this or something? :slight_smile:

4

Not that I know of. I’d start with the grid:

$grid = [
 'row_1' => [ 'b50', 'b50'],
 'row_2' => ['b25', 'b25', 'b25']
];

Then I’d probably rather work with a collection of all images instead of these two loops. Maybe with a custom filter method for the images. But that you have to find out for yourself, it’s a matter of applying the logic.

5

Okay cool. Thanks. I will try to get this done!