Show authors and filter them

Kirby 3 Solved ✅
1

Hello,

I’m showing a masonry of images in my homepage and each image has a blueprint called ‘photographer’.
I want to show an overlay panel with all the photographers as tags and when clicking on them I want the page to filter the images depending on the photographer you clicked in.

Is there any way I can do that?

Thanks in advance.

2

Yes, you can pluck the photographers from the image metadata:

$photographers = $images->pluck('photographer', ',', true);
// where images is your collection of images and `photographer` the name of the field in your metadata.

You can then filter your images by photographer

$images = "definition of your original images collection";

if ($photographer = param('photographer')) {
  $images = $images->filterBy('photographer', $photographer);
}
4

Thanks for the reply. I did that!
The problem comes when I don’t want the tags repeated. In this case the photographer name must be showed only once.

Can I solve that?
Appreciate

5

That’s why I used the true option as third param in the pluckoption. It makes sure you get them only once.

6

That’s true! Thanks so much, always coming with a solution :slight_smile:

7

Hello again,

I did all of this without error.
But nothing’s happening and the filtering doesn’t work, it’s showing all the pictures.

I bet it’s on my template:

<section class="photos">
  <?php foreach(page('photos')->images()->shuffle() as $image): ?>
  <figure>
      <img class="lazyload" data-sizes="auto" data-src="<?= $image->url() ?>" alt="">
      <p class="lazyload filename"><?= $image->filename() ?></p>
      
  </figure>
  <?php endforeach ?>
</section>

Does this need to have something specific?

Thanks a lot.

8

Where is your filter code? In any case, you are calling all images in your foreach loop, so all your filtering is in vain. You have to use the variable we defined earlier in the loop:

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

My homepage looks like this and I’m getting an error. Do you know why?

<?php
	
	$images = page('photos')->files();

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


// fetch all tags
$photographer = $images->pluck('photographer', ',', true);

?>


  <?php foreach($photographer as $photographer): ?>
<a href="<?= url('', ['params' => ['photographer' => $photographer]]) ?>">
  <?= html($photographer) ?>
</a>
  <?php endforeach ?>

 <?php foreach ($images->shuffle() as $image): ?>
  <figure>
  <img class="lazyload" data-sizes="auto" data-src="<?= $image->url() ?>" alt="">
  <p class="lazyload filename"><?= $image->filename() ?></p>
  
  </figure>
  <?php endforeach ?>
10

This should be plural

$photographers = $images->pluck('photographer', ',', true);

Then in the loop:

<?php foreach ($photographers as $photographer): ?>

Maybe if you tell me what the error is… “An error” is a bit unspecific.

11

Thanks for the reply.
I’m actually not getting an error, it simply appears white when clicking on a tag. I did what you told me now.

My page looks like this:

<?php snippet('header') ?>


	
<main>

<?php
	
	$images = page('photos')->files();

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


// fetch all tags
$photographers = $images->pluck('photographer', ',', true);

?>

	
  	
<section class="photos">
  <?php foreach ($images->shuffle() as $image): ?>
  <figure>
  <img class="lazyload" data-sizes="auto" data-src="<?= $image->url() ?>" alt="">
  <p class="lazyload filename"><?= $image->filename() ?></p>
  
  </figure>
  <?php endforeach ?>
</section>





</main>
</div>

<?php snippet('footer') ?>

</div>
	<div id="blur1" class="popwindow" data-height="250">
		<div class="">
			<form action="" method="post">
  <input id="submit" type="url" name="url" placeholder="http://"><br>
  <input type="submit" name="submit" value="Submit">
</form>
			</div>
	</div>
	
		<div id="blur2" class="popwindow" data-height="250">
		<div class="photographers">
			<a href=".">All</a>
  <?php foreach ($photographers as $photographer): ?>
<a href="<?= url('', ['params' => ['photographer' => $photographer]]) ?>">
  <?= html($photographer) ?>
</a>
  <?php endforeach ?>
		</div>
		

		
	</div>
12

First of all, don’t put code after the footer, that is not causing the blank page but will result in invalid HTML.

Hm, the links look alright to me, although to make them work properly when photographer is a name like Marie Lou etc, you would have to urlencode() and urldecode() them.

Link:

<a href="<?= url('', ['params' => ['photographer' => urlencode($photographer)]]) ?>">

filter:

$images = $images->filterBy('photographer', urldecode($photographer));

That still doesn’t explain the blank page…:thinking:

Any errors in your PHP logs?

14

It works perfect now. Thanks a lot :slight_smile: