Page Builder not displaying images at all

In general the page builder plugin works for me, but images don’t work! I’ve searched the forum for 2,5 hours now… so I hope it’s okay to ask!

This is my snippet catching all blocks:

<section class="page-builder">
  <?php foreach($data->mybuilder()->toBuilderBlocks() as $block):
  snippet('blocks/' . $block->_key(), array('data' => $block)); 
  endforeach; ?>
</section>

This is the snippet that should call the image(s) but only outputs an empty imagepair div.

<div class="imagepair">
  <?php foreach($data->images()->toFiles() as $image): ?>
    <div class="image">
      <img srcset="<?= $image->srcset() ?>" />
    </div>
  <?php endforeach ?>
</div>

What am I doing wrong?


Somehow the php syntax highlighting is broken, sorry for that!

What is images() supposed to be? Content from a files field?

tbh I just copied it from here :woozy_face:

Do you have a files field in your builder blocks? Or are you just trying to fetch the files from the page?

If in doubt, please post your blueprint.

This works for me, where gallery() is the files field in the builder blueprint for that block.

<?php $galleryimagesrc = $data->gallery()->toFiles(); ?>


<?php foreach($galleryimagesrc as $image): ?>
<figure class="workpiece">
  <img
     class="lozad"
     src="<?= $image->url() ?>"
     srcset="<?= $image->srcset([480, 640, 1024, 1140, 1920]) ?>"
     alt="<?= $image->alt() ?>" >
  <figcaption><?= $image->caption();?></figcaption>
</figure>
<?php endforeach ?>

Very good question @texnixe It was the blueprint. I had also copied it from another thread and overlooked a translation. Thank you!

Which leads me to the question if there is a comprehensive blueprint/yaml guide somewhere? I find it pretty hard sometimes to understand the logic of the blueprint, especially for the page builder.

I think we have extensive guidance on blueprints, both in the guide, in the reference, in the examples and the Starterkit.

The page builder blueprints are a bit special, though (and the documentation in the plugin’s readme could probably be a bit more detailed, but documentation always takes time that the plugin author probably doesn’t have). Always keep in mind that these people develop this stuff in their free time (and for free in most cases).

thanks, I didn’t know the samples yet

Thats what I noticed… :face_with_thermometer:

Of course!

For the most part, our main Kirby blueprint docs should help though. You might also want to study how to fetch values from the different types of field. Each field has a short intro how to get data in your templates that should help.

But if you use all blueprint features within your builder, it can get pretty complex. It often helps to define fields or blocks separately and reuse within the builder. @jimbobrjames has an example below.

The blueprint can get pretty hectic if you have more then a couple of blocks. I can strongly recommend making use of the Kirby’s awesome ability to re-use and extend fields.

So in your page blueprint you do something like this:

sections:
  # Blocks
  content:
    type: fields
    fields:
      extends: fields/contentblocks

Then you can set the fields up to pull in your builder stuff from the blocks folder:
(in site/blueprints/fields/contentblocks.yml)

type:                  group
fields:
  contentbuilder:
    label: Page Blocks
    type: builder
    columns: 1
    max: 99
    fieldsets:

      # Content
      basiccontent:
        label: Basic Content
        extends: blocks/content

      # Another Block
      anotherblock:
        label: Another Block
        extends: blocks/anotherblock

And the content block blueprint (site/blueprints/blocks/content.yml) would look something like:

type:      group
fields:
  text:
    label: Text
    type:  textarea
    size:  large
1 Like

thanks @jimbobrjames for the introduction to extending blueprints. Already read about it but made me feel a bit… :exploding_head:

Start with simple examples, always check the result in the Panel.