Hi!
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="http://127.0.0.1:8010/page/">
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
Hey,
could you try
<?php
$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!
JS:
$(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 c.map(function(a) {
var b = new Image;
b.src = d + a;
return b
})
})
});
Blueprint:
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>
</div>
Result:
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. 
