Bootstrap carousel moving images to folder to help organisation

The CMS Questions
1

Hi

Many months ago with some help from the forum I got a bootstrap carousel working as a Kirby Tag. After leaving this for a few weeks/months I now realise that putting the images for each carousel in an individual folder would be better for organisation. I can’t seem to get it working and I have now tried everything combination I can imagine. I have tried every post I can find from this forum that may even be a little relevant to no avail. I am sure it is pretty simple (I am by no means a programmer…)

My bootstrap code that works for images and metadata text stored in the page folder (which has been working well):

   $photos = $tag->attr('carouselold');
   $html = '<div id="carousel-gallery" class="carousel">
  
    <div class="carousel-inner">';
  
       $n=0;
       foreach ((str::split($photos,',')) as $slide): $n++;
          if($n=="1"){$class = " active";} else{$class = "";}
          $file = $tag->file($slide);
          $html .='
            <div class="item'.$class.'">
              <img src="'.$file->url().'" alt="'.$file->title().'" />
              <div class="carousel-caption">
                '.$file->caption()->markdown().'
              </div>
            </div>
            ';
          endforeach;
 
     $html .= '  </div>
        <a class="carousel-control left" href="#carousel-gallery" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#carousel-gallery" data-slide="next">&rsaquo;</a>
      
      </div>
  ';

    return $html;

My first attempt that I thought should work. It works when used as a snippet (as opposed to a tag which I am trying to implement):

   $foldername = $tag->attr('carousel');
   $html = '<div id="carousel-gallery" class="carousel">
  
    <div class="carousel-inner">';
  
       $n=0;
       foreach($page->children()->find($foldername)->images() as $slide): $n++;
          if($n=="1"){$class = " active";} else{$class = "";}
          $html .='
            <div class="item'.$class.'">
              <img src="'.$file->url().'" alt="'.$file->title().'" />
              <div class="carousel-caption">
                '.$file->caption()->markdown().'
              </div>
            </div>
            ';
          endforeach;
 
     $html .= '  </div>
        <a class="carousel-control left" href="#carousel-gallery" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#carousel-gallery" data-slide="next">&rsaquo;</a>
      
      </div>
  ';

    return $html;

Obviously in the first version I specify the individual photo names in the tag and split the string in the code. In the new variation I want to specify the folder name in the tag and gather all photos within the folder.

As I said I have tried as many variations as I can think of. Please forgive me if I am doing something stupid.

Many thanks in advance.

Jason

2

Try

$tag->page()->children()->find($foldername)->images();
1 Like
3

Thank you so, so much!

This works:

foreach($tag->page()->children()->find($foldername)->images() as $slide):

Just as you suggested.

1 Like
4

Perhaps it´s a little bit late by now, but you can take a look at my bootstrap carousel snippet:


There´s a snippet for a masonry gallery too. (Just to mention)