Slider with thumbnails

Kirby 3 Solved ✅
1

Hi,
I hope someone can help me or point me in the right direction on how to build a bootstrap carousel slider with thumbnails using KIRBY tags. I am not a pro with Kirby tage or PHP but I have the structure ready but I am not sure how to structure it with Kirby tage. When you select the thumbnail the image display.

Thank you,

See the structure better click on the link: structure image

<?php if($image = $page->image()): ?> <?php endif ?>
    <?php foreach($page->images() as $image): ?>
    2. <?php endforeach ?>
    2

    Not sure I understand. Do you want to create a custom Kirbytag that users can insert into their textarea? r do you want to create such a carousel from a set of files from a files field or section?

    3

    Yes, I want to create a carousel from a set of section images, and to allow the users to click on the thumbnails to see different images.

    Example https://www.jcrew.com/p/womens_category/shirts_tops/blouse/pleated-mockneck-blouse/AU290?color_name=dune

    4

    Can someone help me or should I post my information somewhere else?

    Thank you

    5

    You need to loop through your collection of images and then output the relevant html.

    The basic structure is always like this:

    <!-- start outer HTML wrapper -->
<?php 
$images = $page->images()->template('whatever'); // or whatever you want to filter your images by
foreach ( $images as $image ) : ?>
<!-- html for the single slide  -->
<?php endforeach ?>

<-- end outer HTML wrapper -->

    Of course, you have to fill this with the particular HTML required by Bootstrap. I cannot copy code from an image. If you still have problems, paste the HTML here.

    And a second loop for the controls, only this time, you use use Kirby thumb feature to create the thumbnails.

    6

    Thank you and Happy holiday.

    7

    Merry Christmas to you, too :christmas_tree:!

    8

    Hi, Sorry to bother you again but the basic structure you provided seems to not work. I believed I am doing something wrong. So I pasta two version, one with Kirby Markup and the second one with only html.

    <!-- Kirby Markup -->
<div id="carouselExampleIndicators5" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <?php
                $images = $page->images()->isFirst(); //Display first image 
                foreach ($images as $image()): ?>
                <img class="d-block w-100" src="<?= $image->url() ?>"> 
            <?php endforeach ?>
        </div>
    </div>
</div>
<ol class="carousel-indicators">
    <?php
        $images = $page->images(); //Display thumbnails images 
        foreach ($images as $image()): ?> // loop through the images
        <li data-target="#carouselExampleIndicators5" data-slide-to="0" class="active">
        <img src="<?= $image->crop(100)->url() ?>">
        </li> 
    <?php endforeach ?>
<ol>

     <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!-- Large image -->
 <div class="carousel-inner">
 <div class="carousel-item active">
   <img src="" class="d-block w-100" alt="...">
  </div>
  <div class="carousel-item">
   <img src="" class="d-block w-100" alt="...">
  </div>
</div>
<!-- Thumbnails below -->
<ol class="carousel-indicators">
 <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
 <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
    9

    Because the carousel-item div needs to be inside the loop , then only the first one get the active class

    10

    I put the carousel-item inside. Getting an error Can’t use function return value in write context

    11

    You cannot loop through a single image, why did you change the variable definition?

    13

    No, the carouse-item div is still outside the loop. You haven’t changed anything in your html order but instead redefined the variable.

    14

    I removed the template variable because I did create an image file template .

    15

    I’m afraid I don’t understand what you mean.

    16 
    <?php $images = $page->images(); ?>
<?php if ( $images->isNotEmpty() ) : ?>
<div id="carouselExampleIndicators5" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <?php foreach ($images as $image()): ?>
            <div class="carousel-item<?= $image->is($images->first()) ? ' active' : '' ?>">
                <img class="d-block w-100" src="<?= $image->url() ?>"> 
            </div>
        <?php endforeach ?>
    </div>
</div>
<?php endif; ?>
    18

    I’m trying to adapt the code for a tab-navigation … and I am struggling with my humble php-knowledge …

    The first button in the list should also have an “active”-class for the css and with my code i am getting the following error: “Call to a member function is() on array”. Can anybody can give me a hint?

    Without <?= $tab->is($tabs->first()) ? ' active' : '' ?> the code is working.

    Thanks in advance.
    David

    <?php $tabs = $page->tabs()->yaml(); ?>
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <?php foreach($tabs as $tab): ?>
    <li class="nav-item" role="presentation">
        <button class="nav-link<?= $tab->is($tabs->first()) ? ' active' : '' ?>" id="<?php echo str::slug($tab['button']) ?>-tab" data-bs-toggle="tab" data-bs-target="#<?php echo str::slug($tab['button']) ?>" type="button" role="tab" aria-controls="<?php echo str::slug($tab['button']) ?>" aria-selected="true"><?php echo $tab['button'] ?></button>
    </li>
    <?php endforeach ?>
</ul>
    19

    When you use yaml() wiht a structure field, you get an array and each item in that array is again an array. To be able to use a class method like is() or later first(), you need objects, though.

    So two options:

    1. change to using toStructure() 
    <?php 
$tabs = $page->tabs()->toStructure(); 
if ($tabs->isNotEmpty() ) : ?>
?>
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <?php foreach($tabs as $tab): ?>
    <li class="nav-item" role="presentation">
        <button 
           class="nav-link<?= $tab->is($tabs->first()) ? ' active' : '' ?>" 
           id="<?= $tab->button()->slug()  ?>-tab" 
           data-bs-toggle="tab" 
           data-bs-target="#<?= $tab->button()->slug() ?>" 
           type="button" 
           role="tab" 
           aria-controls="<?= $tab->button()->slug() ?>" 
           aria-selected="true"
         >
           <?= $tab->button() ?>
        </button>
    </li>
    <?php endforeach ?>
</ul>
<?php endif; ?>
    1. Use different syntax:
    <?php 
$tabs = $page->tabs()->yaml(); 
if ( count($tabs) ) :
?>
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <?php foreach($tabs as $tab): ?>
    <li class="nav-item" role="presentation">
        <button class="nav-link<?= ($tab === $tabs[0]) ? ' active' : '' ?>" id="<?php echo str::slug($tab['button']) ?>-tab" data-bs-toggle="tab" data-bs-target="#<?php echo str::slug($tab['button']) ?>" type="button" role="tab" aria-controls="<?php echo str::slug($tab['button']) ?>" aria-selected="true"><?php echo $tab['button'] ?></button>
    </li>
    <?php endforeach ?>
</ul>
<?php endif; ?>
    20

    This is exactly what I need and your explanation together with the code really improves my understanding of Kirby and PHP …

    Thank you very much for your kind help!