Routing Filter for all website images

Kirby 3 Solved ✅
1

Hello,

I have some tags links on the homepage and what I need to do is when I click on one tag to show a new template with the images from all the projects regarding this tag. like this: http://localhost:8000/tag:BIM
On the homepage I am only showing cover images, so I don’t want to filter just these images but all the images on the website that have the same tag. I am trying to use the Filtering via Routes method but even though the URL changes, I don’t get the filtered images nor the tag template. Would appreciate any help, since I am stuck here. Thank you so much!! Here’s my homepage code:

<?php snippet('header') ?>

<main class="covers">
<?php snippet('covers') ?>

<?php 
$text = '&nbsp(&nbsp&nbsp)';
?>

<div class="filters">
  <ul>
  <?php  $images = $site->children()->listed()->images();?>
  <?php $tags = $images->pluck('tags', ',', true);?>
  <?php 
  foreach ($tags as $tag): ?>
    <li>
    <a href="<?= url('', ['params' => ['tag' => $tag]]) ?>">
      <?= html($tag)?><?php echo $text;?>
    </a>
  </li>
    <?php endforeach ?>
  </ul>
</div>
</main>



</main>
<script src="assets/js/cursor.js"></script>
</body>
</html>

here’s my config.php:

return [
    'routes' => [
        [
            'pattern' => 'home/tag/(:any)',
            'action'  => function ($tag) {

                return Page::factory([
                    'slug'     => $tag,
                    'template' => 'tag',
                    'model'    => 'tag',
                    'content'  => [
                        'title' => 'Results for ' . ucfirst($tag),
                    ]
                ]);

            }
        ]
     ]
];

here’s my conroller called: tag

<?php

return function ($site, $page) {

    $tag = urldecode($page->slug());
    $projects = $site->children()->listed()->images();
    $articles = $projects->filterBy('tags', $tag, ',');

    return [
        'articles' => $articles,
        'tag'      => $tag
    ];

};

and here is my tag template:

<?php snippet('header') ?>
<?php foreach($images as $image): ?> 
  <div class="tags-item">
      <a href="www.google.com">  
      <?= $image ?>
      </a>
<?php endforeach ?>
2

Your route listens to home/tag/sometag while your url points to /tag:sometag.

So you have to change the url of your tags to

    <a href="<?= url('home/tags/' . $tag) ?>">
3

I changed this but now I get an empty page with the header and no tagged images and for example my fonts are not being found and I get this error: “GET http://localhost:8000/tag/assets/fonts/5686127/35f0ec4c-2566-463d-a1df-744259ac0ce8.woff2”
It’s like the tag page is above my assets page! I also get this error:
GET http://localhost:8000/tag/BIM 404 (Not Found)

4

I don’t know why this assets thing is happening, but the important thing here is that you make sure that the url you generate for your tags is the same as the one you are listening to in your route

If your route listens to home/tag/BIM, then the above URL won’t work.

5

I managed to make it work but the problem I have is that all my assets are not being loaded, I have to create a Tag folder on the main folder of the website and copy my assets to there as well as javascript files etc. I don’t understand why this is happening. Do you have any idea on how to avoid this?

6

No, don’t do that!

What does your route look like now?

7

I think the paths you are using to your assets are not correct, i.e. they only work on the home page but not on subpages, because you are probably using relative links:

8

I am using the Kirby css like this: <?=css('assets/css/index.css')?> but somehow doesn’t work here. any idea why?
I removed the code from the config and add 2 controlelrs 1 for the homepage and one called projects (they are bot the same):

<?php

return function ($site, $page) {
  $images = $site->children()->listed()->images();
  $tags = $images->pluck('tags', ',', true);

  if($tag = param('tag')) {
    $images = $images->filterBy('tags', $tag, ',');
  }

return compact('images', 'tags', 'tag');
};

and then on the home I have it like this:

<div class="filters">
  <ul>
  <?php foreach ($tags as $tag): ?>
    <li>
    <a href="<?= url('/projects', ['params' => ['tag' => $tag]]) ?>">
      <?= html($tag)?><?php echo $text;?>
    </a>
  </li>
    <?php endforeach ?>
  </ul>
</div>

and on projects like this:

<?php snippet('header') ?>

<div class="tags-container">

<?php foreach($images as $image): ?>

      <div class="tags-item">
          <a href="www.google.com">  
          <?= $image ?>
          </a>
</div>
<?php endforeach ?>


</div>

but this only works because I have created a new folder called projects on the main folder of the website and copied the assets again and I know this is not good. please help me I don’t really now why this is happening!!

Thank you so much!

9

Could you send me a zip file of your project or a link to the repo in a PM, then I’d have a look myself.

10

Yes, I will send you a PM! thank you so so much!

11

Somehow Zips don’t work via PM, how should I send you? thank you so so much!

12

As I wrote earlier, the problems regarding the fonts are due to wrong urls in your font face rules, all links should have a leading slash

 url("/assets/fonts/5686127/701130ff-a1cd-4706-bd19-b4adff518e62.woff")
            format("woff");

Everything else seems to be working now, right?

Although, what I don’t understand is why you don’t put the projects as child pages under the projects page?

Also, you have some extra txt files in your folders that don’t belong to images. You might run into problems in the long run with these.

13

yes!! thank you so so much!