Page Builder - Multiple Images

How i can display a multiple image, from one section with Page Builder?

I have a structure like this, in post.txt:

      picture: 014.jpg,015.jpg,2528.jpg
      _fieldset: post_image_stream

And snippet:

<img src="<?php echo $section->picture()->toFile()->url() ?>">

Thank you!

You have to split the list of comma separated images and then loop through the array:

$images = $section->picture()->split();
foreach($images as $image): ?>
  <img src="<?php echo $section->image($image)->url() ?>">
<?php endforeach ?>

Thank you. It’s almost work.
But how i can get the full URL to image, with “toFile()”?

What do you get with the code I posted above? Maybe $image->toFile()->url() would work, I’m not quite sure, though.

This code return only the page url, without image name:
- $images = $section->picture()->split(); - foreach($images as $image): img(src="<?php echo $section->image($image)->url() ?>") - endforeach

<img src="">

This code return an error:
- $images = $section->picture()->split(); - foreach($images as $image): img(src="<?php echo $section->image($image)->toFile()->url() ?>") - endforeach
Call to a member function url() on a non-object

This code return a file name:
- foreach($section->picture()->split(',') as $image): - echo $image - endforeach
But with $image->url() or $image->toFile()->url() also return an error.
Fatal error: Call to a member function toFile() on a non-object in


could you try

$images = $section->picture()->split();
foreach($images as $image): ?>
  <img src="<?php echo page()->image($image)->url() ?>">
<?php endforeach ?>

The $section object won’t have an image method.

Work like a charm!
Thank you, Tim!

Maybe you know, how to display a multiple images in kirby panel section?
entry: > <img src="{{_fileUrl}}{{picture}}" />

This is not possible because you cannot put any logic into the entry section of the structure field.

Ok, thank you for answer. Maybe i will try to do this with javascript.

This work nice!

$(function() {
   var a = $(".post_image_stream");
   a.html(function(b, e) {
      var c = $(".js_post_image_name", this).text().split(","),
      d = $(".js_post_image_url", this).text();
      return {
         var b = new Image;
         b.src = d + a;
         return b


entry: >
    <div class="post_image_stream" style="width: 50%; margin: 0 auto;">
        <div class="js_post_image_url">{{_fileUrl}}</div>
        <div class="js_post_image_name">{{picture}}</div>


Please use Markdown code blocks when posting code in the forum in the future. They use three backticks at the start/end on separate lines. I have edited your post and you can check how that works when clicking on the pencil button.

Yeah, I know. Sorry for that.

No problem, just a hint for the future. :slight_smile: