Manually create selection list with interesting article pages for start page

Kirby 3 Questions 🤔
1

Hello all,
I would like to create a section on the home page with about 5 cards that show interesting main pages and sub-pages from the website and encourage the visitor to click on them.
The following content should be visible on each card:

  • the cover image of the article page
  • the headline of the article page
  • the subhead of the article page
  • a button with a link to the page

How do I create the appropriate area in the Blueprint?
A checkbox list or multiselect would be a promising way to manually select the relevant pages in the panel. However, I lack the knowledge how to realize this.
How I retrieve cover, headline and subhead is known to me.

Is there already a similar solution for this on getkirby.com or here in the forum?

In the case of a blog, interesting articles are sometimes listed on the homepage. Here, however, the selection is usually made according to other criteria: Recent posts, most read etc.

Thanks a lot!

2

You could use a pages field (which from a functionality point of view is a select/multiselect field) with a query that allows selecting from all pages. Together with a card layout, you would be able to achieve this, apart from the button, which is not needed because clicking on the page will get you there, anyway.

3

Thank you very much for your idea.

I have now integrated the following solution:

  • In the blueprint I call the images from a subfolder inside the home folder.
  • From the images I read out alt and caption, which I use as text in the slider.
  • alt and caption appear in the cards as infotext.

This may not be the optimal solution, but it was quickly feasible for me.

blueprint.yml

trend_images:
    label: "cover images"
    type: files
    template: image
    parent: page.children.find("trends_slider")
    info: "category: <b>category:</b> {{ file.alt }}<br><b>headline:</b> {{ file.caption }}<br><br><b>image dimension:</b> {{ file.dimensions }} px<br><b>file size:</b> {{ file.niceSize }}"
    layout: cards
    image:
        ratio: 3/2
        cover: true
    size: small

template.php

<?php
$files = $page->find('trends_slider')->files()->shuffle();
foreach ($files as $file): ?>
<div>
<img src="<?= $file->thumb(
    [
        'width'     => 600,
        'height'    => 600,
        'crop'      => 'center',
        'format'    => 'webp',
        'quality'   => 70,
    ]
)->url() ?>" alt="" class="w-100" />
<span>
<?php if ($file->alt()->isNotEmpty()) : ?>
<?= $file->alt() ?>
<?php endif ?>
</span>
<span>
<?php if ($file->caption()->isNotEmpty()) : ?>
<?= $file->caption() ?>
<?php endif ?>
</span>
<a href="#">more</a>
</div>
<?php endforeach ?>

(I have reduced the code for better overview and removed CSS-classes and DIVs.)

Now I’m still missing a solution approach, how to assign a link to the corresponding article page to the image…

4

Ok, so this was about files, not pages…

As regards the page the file belongs to, you can get it with

$parentPage = $file->parent();
// and the url
echo $parentPage?->url();
5

I have chosen the solution files instead of pages, because I lack the knowledge for your suggestion :frowning:
Currently I have a solution that works independently of the existing pages.
When I am more familiar with Kirby, I will solve this problem differently.

6

I have now found the solution I was looking for in your cookbook, which is exactly what I wanted:

related:
  label: Articles worth reading
  type: pages
  query: page.siblings(false)
  layout: cards
  image:
    ratio: 5/4
    cover: true
  size: small

Thank you for your support.
The more goals you achieve, the more you enjoy working with Kirby.