Best way to create a list with anchor scrolls

Kirby 3 Solved ✅
1

I really had a hard time finding a title for this problem but this is the best i could do.
So I haven’t actually started coding anything, I just wanted to check if maybe there is a better, smarter way to tackle this problem.
I need to create an page that lists a number of trophies that my client has won over the years.
It’s just a Headline like “Grammy” and then a sub-headline like “Best Actor” or something. All the trophies will just be listed vertically from top to bottom but they want some sort of timeline at the top, like all the years from 1992 - 2023 horizontally spread across the page and if you click on a year it will anchor scroll to the trophies he won that year.

My idea is to just create a folder for each year and put the trophies in it then have fixed anchor points on the page and just put something like this

<div id="anchor-2022">
 <?php foreach($page->children() as $trophy): ?>
    <?= $trophy->headline() ?>
    <?= $trophy->subheadline() ?>
 <?php endforeach ?>
</div>

into every anchored div on that page. But I feel this might be overly complicated or an overkill to create 20 or so folders for that. Is there a smarter way to do this maybe?

2

I would probably use a nested structure field for this, and possibly the object field inside the structure as thats good for related data. If you enable the “sort” option on the structure field, you be able to drag the entries around to put them in order, rather that default of order of entry.

Another way would be to generate virtual pages from a spread sheet.. That way wouldnt have to manually create all those pages and updating the awards is just a case of updating the spreadsheet.

3

Wondering if this really needs a nested structure. Why not just flat with three fields:

  • headline
  • subheadline
  • year or date

Then group by year in the template.

Virtual pages are also an option, but then you have to update an external file. If this file already exists, the structure could be populated once programmatically, after that updated manually. But I guess there aren’t that many changes because you usually don’t collect a hundred throphies per year .

4

I did it like this and it works like I want it to, maybe not the cleanest way but hey:

<main class="main">
        <?php $years = page('projects')->children()->listed()->sortBy('year', 'desc')->groupBy('year'); ?>
        // timeline with anchors
        <div class="class-1">
            <?php foreach($years as $year => $itemsPerYear): ?>
                <div class="class-2">
                    <a href="<?= page('projects')->url() ?>#<?= $year ?>">
                        <?= $year ?>
                    </a>
                </div>
            <?php endforeach ?>
        </div>
       
        <?php
            // areas with awards per year
            foreach($years as $year => $itemsPerYear): ?>
                <div class="class-3">
                    <h2 id="<?= $year ?>"><?= $year ?></h2>
                    <?php
              
                    foreach($itemsPerYear as $item) : ?>
                        <div class="class-4">
                            <p><?= $item->award() ?></p>
                            <small><?= $item->category() ?></small>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endforeach ?>
    </main>