Trying to get a slider working from the panel

Kirby 2 Solved ✅
1

Hi everybody,

I’m trying to add the ideal image slider to my hero section of the home page.
In the static HTML I get it to work (didn’t change anything on the iis js or code in general):

<?php if($page->isHomePage()): ?>
      <div class="presentation df am ac">
              <div id="slider">
                  <img src="content/home/energy1.jpg" alt="Energy" data-caption="#caption-1">
                  <img src="content/home/energy1.jpg" alt="Energy">
                  <img src="content/home/energy1.jpg" alt="Energy">
              </div>
	  <div id="caption-1" style="display:none;">
	    <h2 style="color:white;">Energy</h2>
                <p style="font-size: 0.8em;">Just some <a href="home">random</a> text<</p>
  <?php else: ?>

I tried to make a dynamic Version, where I can change the images in the panel, but since my PHP knowledge is not very good, I rather struggle doing so.

My blueprint for the panel looks like this:

title: Home
  icon: home 
  pages:
  template: 
    - module.accordion
files:
  sortable: true
  fields:
  titlecaption:
    label: caption title
    type: text
  caption:
    label: caption
    type: textarea
fields:
  title:
    label: Title
    type:  text
HomeGalSettings:
  label: Home Slider Settings
  type: headline
HomeGallery:
  label: Gallery images
  type: checkboxes
  options: images
  columns: 3

And the PHP I tried to get this to work looks like this:

<?php if($page->isHomePage()): ?>
      <div class="presentation df am ac">
    <?php if($images = $page->HomeGallery()->split()): ?>

           <?php if($images = $page->HomeGallery()->empty()): ?>
              <div id="slider">
                <?php foreach($images as $image): ?>
                  <img href="<?php echo $page->image($image)->url() ?>" alt="<?php echo $page->image($image)->caption()->kt() ?>">
                <? endforeach ?>	
              </div>
           <?php endif; ?>
    <?php endif; ?>    

  <?php else: ?>

This should replace the code from the static site I have.

The thing is: nothing happens. Just white space, no errors, but no images either. And to be honest: since I don’t really know what I’m doing, I copied and modified the PHP code from another slider that is working and does it basically the same way.

If anybody has any idea how to get it to work, I couldn’t thank you enough - I’m trying for two days now and I’m almost at the point of just leaving it how it is.

Thank you
Daniel

2

Well, you define the images in this this line, overwriting your first setting, which does not make sense.

<?php if($page->isHomePage()): ?>
  <?php if($page->HomeGallery()->isNotEmpty()): ?>
    <div class="presentation df am ac">
      <?php $imageNames = $page->HomeGallery()->split()): ?>
        <div id="slider">
          <?php foreach($imageNames as $imgName): ?>
            <?php if($image = $page->image($imgName): ?>
              <img src="<?php echo $image->url() ?>" alt="<?php echo $image->caption()->kt() ?>">
            <?php endif ?>
          <?php endforeach ?>	
        </div>
    </div>
  <?php endif; ?>
<?php endif; ?>
3

@texnixe beat me to it! i was mid post!!

Personally I use the gallery field or the newer images plugin and then something like this will do the job, inside your isNotEmpty():

  <?php foreach($page->facimages()->yaml() as $facimages): ?>
  <div class="block-col">
    <a data-gall="<?= $page->uid() ?>" class="venobox" href="<?= $page->image($facimages)->url() ?>">
      <img src="<?= $page->image($facimages)->crop(235, 177)->url() ?>" alt="<?= $page->image($facimages)->alt() ?>"/>
    </a>
  </div>
  <?php endforeach ?>

You have left a </div> unclosed which is fine if your using HTMl5 but you have closed them everywhere else.

4

Sorry!:hugs: (and some chars)

But, don’t call url() (or any other method) before testing if the object (in this case the image) exists (I can’t repeat that often enough, I’m afraid!)

5

Maybe get it printed on a t-shirt?

6

:joy:

(I don’t want to add more characters, grrr)

7

Hey,

thank you so much for the quick replies! :smile:
I used texnixe’s code which now gets the slider to show up, showing the caption I entered in the panel but the images can’t be loaded somehow. No errors, just a loading bar.

<?php if($page->isHomePage()): ?>
 <?php if($page->HomeGalerie()->isNotEmpty()): ?>
   <div class="presentation df am ac">
     <?php $imageNames = $page->HomeGalerie()->split() ?>
       <div id="slider">
         <?php foreach($imageNames as $imgName): ?>
           <?php if($image = $page->image($imgName)): ?>
             <img href="<?php echo $image->url() ?>" alt="<?php echo $image->caption()->kt() ?>">
           <?php endif ?>
         <?php endforeach ?>	
        </div>
   </div>
 <?php endif; ?>

Daniel

8

Do a view source in the browser. What is the path? If its like domain.com/imagefile.jpg and this is a subpage thats your problem.

Edit: ok its not a subpage, your checking this is the home page. hmm.

9

What do you get in the source code? Are there any JS errors in your dev console?

Edit: Your images have a href attribute instead of src attribute …:thinking:

<img src="<?php echo $image->url() ?>" alt="<?php echo $image->caption()->kt() ?>">
10

Well that was staring me in the face. More coffee for me then…

11

Yeah… that’s it. I gotta say, that’s a bit embarassing :joy: Especially since I changed that yesterday to src but apparently got mixed up in a different version…

Thank you so much, works perfectly now! :laughing: