Grid-layout with selector

Kirby 2 Questions 🤔
1

hey guys, i want to build a gridlayout on a website like this

Bildschirmfoto 2016-01-23 um 20.07.12.png1860×940 1.52 MB

but i dont know how make a grid-layout and to connect it with the selector …
we have a css-file which displays this grid-layout

this is how it looks in the template

  <?php $grids = $page->blockgrid1()->split(',');
    if(count($grids) == 1) {$grid = $page->grid($grids[0]);?>
    <section class="module-text-content primary-bg-color" id="office-impressions">
        <h3><?php echo $page->titelbilder() ?></h3>
        <?php } else{ ?>
        <div class="block-grid">
            <ul>
                <?php foreach($grids as $number => $grid):?>
                <li style="background-image:url(<?php echo $page->grid($grid)->url() ?>);" <?php if ($number >0)echo 'data-delay="'.$number.'000"' ?>></li>
            <?php endforeach ?>
        <?php } ?>
            </ul>
        </div>
    </section>
 
 <section class="module-text-content primary-bg-color" id="office-impressions">
    <div class="block-grid">
        <ul>
            <li><div class="inner photo photo-1"></div></li>
            <li><div class="inner photo photo-2"></div></li>
            <li><div class="inner photo photo-3"></div></li>
            <li><div class="inner photo photo-4"></div></li>
            <li><div class="inner photo photo-5"></div></li>
            <li><div class="inner photo photo-6"></div></li>
            <li><div class="inner photo photo-7"></div></li>
            <li><div class="inner photo photo-8"></div></li>
        </ul>
    </div>
</section>

this is our css-file, but not our full css !!

<?php $grids = $page->blockgrid1()->split(',');
if(count($grids) < 2) $grids = array_pad($grids, 2, '');
$grid = call_user_func_array(array($page->grid(), 'find'), grids);

#about-page #office-impressions .photo.photo-5 {
  background-image: url("echo $grid->url(); ");
}

#about-page #office-impressions .photo.photo-talk {
  background-image: url("echo $grid->url(); ");

}

#about-page #office-impressions .photo.photo-2 {
  background-image: url("/build/img/about-page/bild-tasse.jpg");
}
foreach($grids as $grid)

our blueprint for the selector

 blockgrid1:
    label: 
        en: images for photo-grid
        de: Bilder für das Bilder-Grid
    type:  selector
    mode:  multiple
    types:
      - all
2

Are you trying to use PHP in the CSS file itself? If so, that won’t work.

You could simplify this:

<div class="photo-grid">
  <?php foreach ($page->client_logos()->toStructure() as $logo): ?>
    <?php if (null !== $page->files()->find($logo->logo_image)): 
    	// You'll want to include this IF - in case the image is deleted from the page but the selector is not updated and still thinks the image exists ?>
     	<div class="photo-grid-item" style="background-image:url('<?= $page->files()->find($logo->logo_image)->url() ?>')"></div>
    <?php endif ?>
  <?php endforeach ?>
</div>

CSS like:

.photo-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.photo-grid-item {
	width: 25%;
	padding-top: 100%; /* this will keep the element square */
	background-size: cover;
	background-position: center center;
}

you could also echo out the URL of a thumbnail by including a false as a third parameter:

<div class="photo-grid-item" style="background-image:url('<?= thumb($page->files()->find($logo->logo_image), array('width' => 400), false) ?>')"></div>
3

It looks like you’re also trying to target specific children in the grid - you can do this with:

.photo-grid-item:nth-child(2) {
  width: 50%;
}