2 Sliders, 1 Page

Kirby 2 Solved ✅
1

hey everyone,

i’m trying to create a product page with 2 sliders on it. i have created 2 image fields in my blueprint named slider1 and slider2, and all i want to do is have the images i placed in those fields to loop through in their respective sliders. here is the code i use when there is only 1 slider:

<?php if ($images = $page->images()->sortBy('sort', 'asc')): ?>

  <ol class="content">

    <!-- Loop through all images -->
    <?php foreach($images as $image): ?>
      
      <!-- You can simply use $images as filtered above -->
      <?php if($image == $images->first()): ?>

        <li class="current">
          <img src="<?php echo $image->url() ?>" class="img-responsive">
        </li> 

      <!-- Don't forget the else -->
      <?php else: ?>

        <li>
          <img src="<?php echo $image->url() ?>" class="img-responsive">
        </li>

      <?php endif; ?>

    <?php endforeach; ?>
  </ol>
<?php endif; ?>

i can’t figure out how would i modify this to pull images from a specific field… please help!

thanks
Oli

2

How are the images stored, as yaml or as a comma separated list of filenames?

3

oh boy, looks like there is an issue even before i can answer your question. i just realized i can’t add more then 1 image to each of the image fields… :thinking:

so basically i will take any advice on what is the best way to approach this problem, which is basically how to create two separate lists of images and then pull from them individually in the template…

4

I see two options:

5

+1 for using the kirby images plugin. I’ve been trying it out the last few days, its pretty good.

6

ok guys, well you were right… i used the images plugin and it was super simple even for a n00b such as myself, HOWEVER it appears i have a very small but important bug now.

what happens is, when you click on the ‘next’ or ‘prev’ arrow the first time after the page loads, nothing happens. the second time you click it, the slide transitions and everything works fine and you can keep looping through all the images no problem. here is the new php i’m using:

<ol class="content">

  <!-- Loop through all images -->
  <?php foreach($page->slider1()->yaml() as $image): ?>
    
    <!-- You can simply use $images as filtered above -->
    <?php if($image = $page->image($image)): ?>

      <li class="current">
        <img src="<?php echo $image->url() ?>" class="img-responsive">
      </li> 

    <!-- Don't forget the else -->
    <?php else: ?>

      <li>
        <img src="<?php echo $image->url() ?>" class="img-responsive">
      </li>

    <?php endif; ?>

  <?php endforeach; ?>

</ol>

if i sub in the previous code, everything works fine but then it pulls all the page images again instead of from the specific fields. any ideas? it’s a small thing but key to the entire functionality so it’s driving me crazy!

7

The problem is that you add the current class to all images, because your condition will be true for each existing image. Also, you don’t have to repeat the complete code just to add a class conditionally, anyway. A counter variable to the help:

<ol class="content">

  <!-- Loop through all images -->
  <?php
   $count = 1;
   foreach($page->slider1()->yaml() as $image): ?>
    
    <?php if($image = $page->image($image)): ?>

      <li class="<?php e($count == 1, 'current', '') ?>">
        <img src="<?php echo $image->url() ?>" class="img-responsive">
      </li> 

     <?php endif; ?>

  <?php $count++;  endforeach; ?>

</ol>
1 Like
8

What script are you using? In general, classes like current or active are added dynamically by the javascript. If you add them manually, you can interfere with it. Are you sure this class should be added? It is probably working on the second click because by that time the javascript has reset the classes to the way it is expecting.

9

That really depends, Bootstrap carousel, for example, needs the active class on one element.

10

Sure, thats why I was checking :lollipop:

11

this worked perfectly, thank you!

you guys always make this stuff look so easy -_-

and yes it is a pure javascript slider that i learned to write in order to try and teach myself a bit! i like it because of it’s simplicity.

thanks again!