Do not display image used for thumbnail on project page

Kirby 2 Solved ✅
1

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

Project.PHP

<?php snippet('header') ?>

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

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

    <div class="text wrap">

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

      <?php
      // 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): ?>
        <figure>
          <img src="<?= $image->url() ?>" alt="<?= $page->title()->html() ?>" />
        </figure>
      <?php endforeach ?>

    </div>

    <?php snippet('prevnext') ?>

  </main>

<?php snippet('footer') ?>
2

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.

3

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.

4

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?

5

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.

6

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

7

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.

Showcase.PHP

<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>
          </div>
        </a>
    </li>

  <?php endforeach ?>

</ul>
8

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

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

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)

image
image.jpg1882×709 151 KB

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