How to dynamically add numbers to IDs

The CMS Questions
1

Hi, I know this isn’t really a kirby question, but I’m using it in a Kirby page - so maybe someone can help me.
I have the following code

<?php
    $t = "tab"
    $c = "carousel-t"
    for ($i=0; $i < 3; $i++) { 
     ?>

This is the start of a for loop, in the loop I want to include:

<div id="tab1" class="tab">
        <div id="carousel-t1" style="max-width: 300;">

Where tab1 changes to tab2 and tab3 per iteration, same for carousel-t1, 2 & 3.

my problem is what to do with the quotes in id=“tab1”

Any help appreciated

2

Assuming that you are looping through a set of children of the current page

<?php
$children = $page->children()->listed();
foreach ($children as $child): ?>
<div id="tab<?= $children->indexOf($child)+1 ?>" class="tab">
        <div id="carousel-t<?=  $children->indexOf($child)+1 ?>" style="max-width: 300;">
<?php endforeach ?>
3

Thanks for this.
I have 3 tabs on the front end, each tab loops thru the images of a sub- page.
I have the following for the 1st tab

<div id="tab1" class="tab">
        <div id="carousel-t1" style="max-width: 300;">
         <?php 
        $images = $page->children()->nth(0)->images()
          ?>   
          <?php foreach ($images as $image) : ?>
             <div class="slide" style="margin-right: 25px">
                <?= $image->resize(1000) ?>
             </div>               
          <?php endforeach ?>
   </div>       
  </div>

Instead of writing the code for each tab I want a for loop to create the 3 tabs.
Don’t understand how your code applies.

4

But where is the loop for the subpages?

5

Each tab is a separate child page

tab1        $images = $page->children()->nth(0)->images()
tab2        $images = $page->children()->nth(1)->images() 
tab3       $images = $page->children()->nth(2)->images()

and each tab displays the images in that child page:

<?php foreach ($images as $image) : ?>
             <div class="slide" style="margin-right: 25px">
                <?= $image->resize(1000) ?>
             </div>               
          <?php endforeach ?>

I still need to write the loop, but as I said don’t know how to compose the id names

6

Sorry Sonja, took me a while to understand your original reply, I see you actually answered my question - it was me that didn’t see it.

Thanks

7

Your final code should look like this then:

<?php
$children = $page->children()->listed();
foreach ($children as $child): ?>
<?php $images = $child->images(); ?>
<?php if ($images->isNotEmpty()): ?>
<div id="tab<?= $children->indexOf($child)+1 ?>" class="tab">
        <div id="carousel-t<?=  $children->indexOf($child)+1 ?>" style="max-width: 300;">
            <?php foreach ($images as $image) : ?>
               <div class="slide" style="margin-right: 25px">
                  <?= $image->resize(1000) ?>
               </div>               
          <?php endforeach ?>
      </div>
</div>
<?php endif ?>
<?php endforeach ?>
8

Thanks for taking the time to complete the code.
Worked 1st time
Much appreciated

1 Like