One-Pager and Jssor Slider Image loading problem

Kirby 2 Solved ✅
1

Hello,

I’m not that big of a »coder«, all the things I did I somehow built with all the tutorials here. But know I have reached a problem which I can’t solve on my own.

I want to built my new website like the described »One-Pager« from the Docs. Instead of only thumbnails I want to display 3 Projects with each a headline, image slider and text description.

For the image slider I use/installed jssor jQuery image slider. It works if I use it with static image sources but if I want to »echo« images via kirby php it doesn’t work, at least not for me.

That is the part for the projects snippet:

  <ul>
    <?php foreach($data->children()->visible() as $project): ?>
      <li>
        <figure>
          <img src="<?php echo $project->images()->first()->url() ?>" alt="<?php echo $project->title()->html() ?>">
        </figure>
      </li>
    <?php endforeach ?>
  </ul>

In-between the figure tag copied the jssor jQuery so that instead of loading the first image the slide will be loaded. Is this even possible or the right thing to do? That’s the code for the slider.

The code in the example for loading the images looks like this:

<div><img u="image" src="../img/photography/002.jpg" /></div>
<div><img u="image" src="../img/photography/003.jpg" /></div>
<div><img u="image" src="../img/photography/004.jpg" /></div>

If I exchange the source for the echo image function it doesn’t work. I copied several lines but there was no correct output.

The ideal solution would be a function which loads all images into the slide. It would be bonkers if the file name and the number of pictures could vary per individual project.

Could anybody help me with this problem?

Kind regards and thanks in advance
Jannick

2

You would need something like

<figure>
  <?php foreach($project->images() as $image) : ?>
    <div><img src="<?php echo $image->url() ?>" alt="<?php echo $project->title()->html() ?>"></div>
  <?php endforeach; ?>
</figure>
3

Ha,
that worked out quickly!

Thanks a lot. I thought to complicated and always tried to cram the function in-between the src element.

Thanks again!