Fancybox 3 + Kirby CMS: How to exclude certain image from slider

1

With lots of kind help from the forum I have set up the fancybox 3-plugin to work with the kirby CMS in order to create separate sliders for each project I have on my page. The sliders are opened when a thumbnail of the respective project is clicked on the homepage. Here’s a link to the forum entry in which all my previous problems with setting up the slider have been discussed an solved: Loading all images of a project into a Fancybox-slider (but only displaying the first image on the homepage)

I’d now like to modify the slider script a little so that it actually excludes the thumbnail (the first image of the respective project) from the slider. I thought I might be able to do that by still calling the first image of the project to be used as the clickable thumbnail but having a nested foreach-loop that creates the slider-slides from only those images whose name include a certain string. Then I could name the first image differently every time I create a project and hence exclude the thumbnail showing up on the homepage from the actual slider which opens when it is clicked.

I tried to use the filterBy-method in my code, but could only come up with this version which crashes the local server I’m testing the website on:

<div class="project-wrapper">

	<div class="flex-grid-thirds">

	  <?php foreach($projects as $project): ?>
	      
	      <div class="col">

	        <?php 
	        $projectImages = $project->images();
	        foreach($projectImages as $projectImage):
	        ?>

	    		<?php 
	    		foreach ($projectImages as $projectImage->filterBy('filename', '*=', '-slider')):
	    		?>

			        <a href="<?= $projectImage->url() ?>" data-fancybox="gallery-<?= $projects->indexOf($project) ?>">

			    <?php endforeach ?>

			          <?php if($projectImage == $projectImages->first()): ?>
			            <img src="<?= $projectImage->url() ?>" alt="Thumbnail for <?= $project->title()->html() ?>" class="" />
			          <?php endif ?>

			        </a>    

	      	<?php endforeach ?>

	    	</div>

	  <?php endforeach ?>
	  
	</div>

</div>

How can I use the filterBy-method to do what I’m trying to accomplish here?

2

Why don’t you want the thumbnail (or rather the larger image that belongs to the thumbnail to show up in the slider? Is that thumbnail created by the thumb method and if not, why not?

Otherwise, you can call the fancybox function via javascript manually (onclick), and remove the data attribute from the thumb.

3

I would like to be able to use a separate image as a project’s preview/thumbnail image; hence, this image shouldn’t show up in the slideshow corresponding with the project.

4

First of all, have you turned on debugging in your config.php?

Secondly, your code crashes because you are calling the filter on a single image instead of on the image collection.