Problems with cropping

Kirby 3 Solved ✅
1

Hello! I’ve created a front page for my website that pulls blog posts into neat resizing tiles. The images are placed inside a grid container tile (blog_container_child) that is nested inside a flexbox (blog_tiling_subcontainer). This is the code I have written:

<?php snippet('header') ?>
        <div class="blog_tiling_subcontainer">
                <?php foreach ($site->children()->listed() as $Blog): ?>
                        <?php foreach ($Blog->children()->listed() as $page): ?>
                                <div class="blog_container_child">
                                        <div class="blog_tile_image"><?= $page->image() ?></div>
                                        <p class="blog_tile_text"><?= $page->text() ?></p>
                                </div>
                        <?php endforeach ?>
                <?php endforeach ?>
        </div>
</body>
</html>

I want to crop and center the images into their section on the tile. Inspecting on the browser shows that the image container - item (blog_tile_image) fits the desired dimensions on the tiles grid container. When I try the following, I get crashes:

<div class="blog_tile_image"><?= $page->image()->crop() ?></div>

I’m a new coder so I know there’s probably some kind of syntax error that I’m missing, I’d appreciate any help you can give.

2

With any kind of object, you should always check if it exists first:

<?php if ($image = $page->image()): ?>
  <?= $image->crop(400) ?>
<?php endif; ?>

Crop also needs min 1 param.

Also, I’d recommend not to use the variable $page in your loop, because $page is a special variable in Kirby that refers to the current page object.

<div class="blog_tiling_subcontainer">
  <?php foreach ($site->children()->listed() as $blog) : ?>
    <?php foreach ($blog->children()->listed() as $article) : ?>
      <div class="blog_container_child">
        <?php if ($image = $article->image()) : ?>
          <div class="blog_tile_image"><?= $image->crop(400) ?></div>
        <?php endif; ?>
        <p class="blog_tile_text"><?= $page->text() ?></p>
      </div>
    <?php endforeach ?>
  <?php endforeach ?>
</div>
1 Like
4

Thank you! works. I guess I need to work on my php skills.