Changing the showcase-snippet to display multiple images

Kirby 2 Solved ✅
1

Hi.

I would like to use the showcase snippet to display multiple images per project. Is that possible? And if so, how? Or is there a better way to display only the images of all projects?

Thanks, have a good day, I’ll be grateful for any help.

2

Two options:

  • get all images of all projects and then loop through them:
$allImages = page('projects')->children()->images();
foreach($allImages as $img) {
  // do stuff
}
  • loop through all projects, get the images of each project then loop through the images for each project
foreach($projects as $project) {
  $projectImages = $project->images();
  foreach($projectImages as $img) {
    // do stuff
  }
}
2 Likes
3

Thanks so much for the reply.

How would my showcase.php then have to look like? This version which I tried based on your reply unfortunately doesn’t work (I have mention that I am very new to working with php and am still in the process of wrapping my head around how it works):

<?php

	$projects = page('projects')->children()->visible();


	if(isset($limit)) $projects = $projects->limit($limit);

?>


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

  	foreach ($projectImages as $img): ?>

  		<img src="<?= $thumb->url() ?>" alt="Thumbnail for <?= $project->title()->html() ?>" class="showcase-image" />
	  		
	<?php endforeach ?>

<?php endforeach ?>
4

Here’s the complete snippet. Remove the caption if you don’t want it.

<?php
$projects = page('projects')->children()->visible();

if(isset($limit)) $projects = $projects->limit($limit);

?>

<ul class="showcase grid gutter-1">

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

      <li class="showcase-item column">
          <a href="<?= $project->url() ?>" class="showcase-link">
            <?php $thumb = $image->crop(600, 600); ?>
              <img src="<?= $thumb->url() ?>" alt="Thumbnail for <?= $project->title()->html() ?>" class="showcase-image" />
            <div class="showcase-caption">
              <h3 class="showcase-title"><?= $project->title()->html() ?></h3>
            </div>
          </a>
      </li>
    <?php endforeach ?>
  <?php endforeach ?>

</ul>
1 Like