web-jbeyerstedt/site/templates/projects.php

<?php
// -------------------------------------------
// kirby template FOR jannikbeyerstedt.de

// copyright: Jannik Beyerstedt | https://jannikbeyerstedt.de
// license: http://www.gnu.org/licenses/gpl-3.0.txt GPLv3 License
// -------------------------------------------

$children = $page->children()->listed();

snippet('base/html-head');
snippet('base/cont-header');
?>

<main class="section projects">
  <div class="container">
    <h1><?php echo $page->title()->kirbytext(); ?></h1>
    <?php echo $page->text()->kirbytext(); ?>
  </div>

  <div class="container"><div class="row">
    <?php $i=0; foreach($children as $c) : $i++; ?>
    <div class="col-sm-6 col-lg-3"><div class="card">
      <a href="<?php echo $c->url(); ?>">
      <?php if ($img = $c->images()->find($c->exrpt_img())) {
        $imgurl = $img->url();
        $srcset = $img->srcset([
          '1x' => ['width'=>400, 'quality'=>70],
          '2x' => ['width'=>800, 'quality'=>70]
        ]);
        echo '<img src="'.$imgurl.'" class="card-img-top" srcset="'.$srcset.'" />';
      } ?>
      <div class="card-body">
        <h5 class="card-title"><?php echo $c->title()->html(); ?></h5>
        <p class="card-text"><?php echo $c->exrpt_text()->kirbytextinline(); ?></p>
      </div>
      </a>
    </div></div>
    <?php
      echo ($i%2 == 0)?'<div class="clearfix d-block d-lg-none"></div>':'';
      echo ($i%4 == 0)?'<div class="clearfix d-none d-lg-block"></div>':''
    ?>
    <?php endforeach; ?>
  </div></div>
</main>

<?php snippet('base/cont-footer') ?>
<?php snippet('base/html-end', []) ?>