Do not display image used for thumbnail on project page

I’m building myself a new portfolio site and have made custom thumbnails for my projects but I don’t want the image used for the thumbnail to show up on the project page. Is there a way of doing this?

I’m using the Kirby Starterkit Template


<?php snippet('header') ?>

  <main class="main" role="main">

    <header class="wrap">
      <h1><?= $page->title()->html() ?></h1>
      <div class="intro text">
        <?= $page->year() ?>
      <hr />

    <div class="text wrap">

      <?= $page->text()->kirbytext() ?>

      // Images for the "project" template are sortable. You
      // can change the display by clicking the 'edit' button
      // above the files list in the sidebar.
      foreach($page->images()->sortBy('sort', 'asc') as $image): ?>
          <img src="<?= $image->url() ?>" alt="<?= $page->title()->html() ?>" />
      <?php endforeach ?>


    <?php snippet('prevnext') ?>


<?php snippet('footer') ?>

Theres a couple of ways… some kind of filter

One option is to prefix or suffix the thumbnail image with something so the full name is project-thumb.jpg, then setup a custom filter letting you filter on it described here

Another, messier way is to use to use a field in a files meta data to set a field and then filter on that.

As a side note, this is better way to do your alt tags, rather then using the page title. Using file fields will let you set a alt tag value for each image.

Option three…

Avoid all that nonsense and save your self the job of creating custom thumbnails by using the Focus plugin and fetching the URLs like this:

$image->focusCrop(300, 150)->url()

So you would do that on your project list page, and do it the normal way on an individual project page.

Focus crop lets you pick a point on the image that becomes the center point of the crop, rather the default of just using the dead center of an image.

This is the way i did it on my portfolio.

How do you fetch the thumbnail? Is it selected via a select field? Or by filename? Excluding it would be just a matter of turning this round.

Using the focus crop plugin does not really help with unselecting the image, does it?

Well it does by not having a thumbnail image in the set files on the page in the first place, its getting Kirby to generate the thumbnail on the fly instead, removing the need to bother with a filter.

That depends, if you don’t want to use the image you use for the thumbnail, then you still have to filter it out.

I believe this is the code selecting the thumbnail. It’s part of the Showcase.PHP. I upload my thumbnail to the project page as the first image.


<ul class="showcase grid gutter-1">

  <?php foreach($projects as $project): ?>

    <li class="showcase-item column">
        <a href="<?= $project->url() ?>" class="showcase-link">
          <?php if($image = $project->images()->sortBy('sort', 'asc')->first()): $thumb = $image->crop(600, 600); ?>
            <img src="<?= $thumb->url() ?>" alt="Thumbnail for <?= $project->title()->html() ?>" class="showcase-image" />
          <?php endif ?>
          <div class="showcase-caption">
            <h3 class="showcase-title"><?= $project->title()->html() ?></h3>

  <?php endforeach ?>


Then you can get the rest of the images like this:

<?php $images = $project->images()->sortBy('sort', 'asc')->offset(1); ?>
1 Like

I had the same use case in my portfolio and I solved it adding a filter and panel fields, and it works like a charm. I can share the code if you want @Brighurst (I don’t have it right now).

(featured image is also the thumbnail image on project list)

(I use a plugin to display images but it’s the same thing with vanilla panel)