Numbers of projects in loop


#1

Hallo,
i would like to create carousel with 6 projects on one slide, but i can create only one project on the slide, Mayby somoeone help me :slight_smile:

This is the fragment of code:

<div class="carousel-inner">
					<?php foreach($projects as $project): ?>
						<div class="carousel-item projectitem">

							<ul class="row projects">

								<li class="project mt-3 mt-lg-4 col-12 col-md-6 col-lg-4">
									<a href="<?= $project->url() ?>" class="project-href">
									<?php if($image = $project->images()->sortBy('sort', 'asc')->first()): $thumb = $image->crop(500, 300); ?>
									<img src="<?= $thumb->url() ?>" class="img-fluid zdjproject" alt="<?= $project->title()->html() ?>">
									<?php endif ?>
									<div class="project-title">
									<h3 class="project-name"><?= $project->title()->html() ?></h3>
									</div>
									</a>
								</li>

							</ul>

						</div>
					<?php endforeach ?>
				</div>

.carousel-inner - hold all of the slides
.carousel-item projectitem - is one of the slides
li - one of six projects

I don’t know how can i create the lop with six li in one .carousel-item


#2

your foreach loop has to be moved to wrap the li tags instead of the carousel item container. you might want to limit your number of projects as well using $projects->limit(6)


#3

Ok, Thank You, but How can I create next .carousel-item with next 6 items?


#4

what is supposed to be in the carousel items and what in the li tags? do you want to create groups of six projects each?


#5

Exactly. I have group of projects (their quantity is growing) and i have to group them into 6
Into the li I have first image of project and title


#6

Then chunk() is what you are looking for: https://getkirby.com/docs/cheatsheet/pages/chunk

<?php
$chunks = $projects->chunk(6);
<div class="carousel-inner">
<?php foreach($chunks as $chunk): ?>
  <div class="carousel-item projectitem">

  <ul class="row projects">
  <?php foreach($chunk as $project): ?>
    <li class="project mt-3 mt-lg-4 col-12 col-md-6 col-lg-4">
      <a href="<?= $project->url() ?>" class="project-href">
        <?php if($image = $project->images()->sortBy('sort', 'asc')->first()): $thumb = $image->crop(500, 300); ?>
          <img src="<?= $thumb->url() ?>" class="img-fluid zdjproject" alt="<?= $project->title()->html() ?>">
        <?php endif ?>
        <div class="project-title">
          <h3 class="project-name"><?= $project->title()->html() ?></h3>
         </div>
        </a>
      </li>
      <?php endforeach ?>
    </ul>

    </div>
  <?php endforeach ?>
</div>

#7

You are my Hero :slight_smile:
It works perfectly. Many Many Thanks