One slideshow with content from sub-pages

Kirby 2 Solved ✅
1

Hi, Guys. I’m trying to build a slideshow with content from several subpages + its project-title as a caption. I am using Slick Slider for this. The problem now is that the content is not only in one slideshow. It generates a new slideshow for every subpage on top of each other . My code looks like this:

<?php foreach($page->children()->visible() as $projects): ?>

<div id="hide-slick">
	<div class="slider index-slider">
		<?php foreach($projects->slideshow()->yaml() as $image): ?>
			<?php if($img = $projects->image($image)): ?>
				<div>
					<div class="inner-slide">
						<?php snippet('responsive_image', array('image' => $img, 'sizes' => [512, 1024, 1280, 1440])) ?>
					</div>
				</div>
				<?php echo $projects->projecttitle();?>
			<?php endif ?>
		<?php endforeach ?>
	</div>
</div>

<?php endforeach ?>

How can i say that the content is only in one slideshow and that also the project-title changes when i slide through it?

I appreciate every help :slight_smile:

2

Your foreach loop is not placed correctly:

<?php 
$projects = $page->children()->visible();
?>
<div id="hide-slick">
	<div class="slider index-slider">
      <?php foreach($projects as $project) : ?>
		  <?php foreach($project->slideshow()->yaml() as $image): ?>
			<?php if($img = $project->image($image)): ?>
				<div>
					<div class="inner-slide">
						<?php snippet('responsive_image', array('image' => $img, 'sizes' => [512, 1024, 1280, 1440])) ?>
					</div>
				</div>
				<?php echo $project->projecttitle();?>
			<?php endif ?>
		 <?php endforeach ?>
        <?php endforeach ?>
	</div>
</div>

Please note that I have renamed the variable used inside the loop from $projects to $project (because it is a single item) and given the $projects variable to the collection. I think the code is easier to understand that way.

3

That worked perfect. Thanks for the fast answer :slight_smile:

One thing. How can I say that only one project-title is shown of the visible content of each sub-page. Because now it looks like this:

49
Bildschirmfoto 2017-11-04 um 13.14.49.png1576×108 19.8 KB

4

Got it.

I also placed<?php echo $project->projecttitle();?> wrong

this is working for me:

<?php $project = $page->children()->visible();?>
<div id="hide-slick">
	<div class="slider index-slider">
      <?php foreach($project as $project) : ?>
		  <?php foreach($project->slideshow()->yaml() as $image): ?>
			<?php if($img = $project->image($image)): ?>
				<div>
					<div class="inner-slide">
						<?php snippet('responsive_image', array('image' => $img, 'sizes' => [512, 1024, 1280, 1440])) ?>
						<p class="projectTitle"><?php echo $project->projecttitle();?></p>
					</div>
				</div>
		   <?php endif ?>
		 <?php endforeach ?>
        <?php endforeach ?>
	</div>
</div>