# Page Builder not displaying images at all

**URL:** <https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745>\
**Category:** Questions\
**Tags:** v3\
**Created:** [April 10, 2019, 2:45pm UTC](https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745 "2019-04-10T14:45:14Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![luap](https://avatars.discourse-cdn.com/v4/letter/l/45deac/32.png) [@luap](https://forum.getkirby.com/u/luap)\
**Post date:** [April 10, 2019, 2:45pm UTC](https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745/1 "2019-04-10T14:45:14Z")

</div>

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:

```php
<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.

```php
<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!

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 10, 2019, 2:51pm UTC](https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745/2 "2019-04-10T14:51:34Z")

</div>

> [@luap](#):
>
> $data-\>images()-\>to

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

---

<div class="post-metadata">

**Author:** ![luap](https://avatars.discourse-cdn.com/v4/letter/l/45deac/32.png) [@luap](https://forum.getkirby.com/u/luap)\
**Post date:** [April 10, 2019, 3:00pm UTC](https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745/3 "2019-04-10T15:00:16Z")

</div>

tbh I just copied it from here 🥴

> [@K3 Page Builder: accessing files for a gallery](https://forum.getkirby.com/t/k3-page-builder-accessing-files-for-a-gallery/12806/7):
>
> Hey. I just pushed a new version that fixes some issues with tabs and the files field. It should now work exactly like accesing images from within a structure field To access images of a builder fieldset you can use something like this: \<?php foreach($data-\>images()-\>toFiles() as $image): ?\> \<?= $image-\>resize(100) ?\> \<?php endforeach ?\> In the old version, this did only work when not having tabs in the fieldset.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 10, 2019, 3:01pm UTC](https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745/4 "2019-04-10T15:01:55Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [April 10, 2019, 3:11pm UTC](https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745/5 "2019-04-10T15:11:14Z")

</div>

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

```auto
<?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 ?>

```

---

<div class="post-metadata">

**Author:** ![luap](https://avatars.discourse-cdn.com/v4/letter/l/45deac/32.png) [@luap](https://forum.getkirby.com/u/luap)\
**Post date:** [April 10, 2019, 3:13pm UTC](https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745/6 "2019-04-10T15:13:28Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 10, 2019, 3:15pm UTC](https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745/7 "2019-04-10T15:15:24Z")

</div>

I think we have extensive guidance on blueprints, both in the [guide](https://getkirby.com/docs/guide/blueprints/introduction), in the [reference](https://getkirby.com/docs/reference/panel/blueprints), in the [examples](https://getkirby.com/docs/reference/panel/samples) 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).

---

<div class="post-metadata">

**Author:** ![luap](https://avatars.discourse-cdn.com/v4/letter/l/45deac/32.png) [@luap](https://forum.getkirby.com/u/luap)\
**Post date:** [April 10, 2019, 3:28pm UTC](https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745/8 "2019-04-10T15:28:10Z")

</div>

> [@texnixe](#):
>
> I think we have extensive guidance on blueprints, both in the [guide](https://getkirby.com/docs/guide/blueprints/introduction), in the [reference](https://getkirby.com/docs/reference/panel/blueprints), in the [examples](https://getkirby.com/docs/reference/panel/samples) and the Starterkit.

thanks, I didn’t know the samples yet

> [@texnixe](#):
>
> The page builder blueprints are a bit special, though

Thats what I noticed… 🤒

> [@texnixe](#):
>
> Always keep in mind that these people develop this stuff in their free time (and for free in most cases).

Of course!

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 10, 2019, 3:30pm UTC](https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745/9 "2019-04-10T15:30:44Z")

</div>

> [@luap](#):
>
> > The page builder blueprints are a bit special, though
> 
> Thats what I noticed… 🤒

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](https://getkirby.com/docs/reference/panel/fields). 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.

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [April 10, 2019, 3:34pm UTC](https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745/10 "2019-04-10T15:34:06Z")

</div>

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:

```auto
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`)

```auto
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:

```auto
type: group
fields:
  text:
    label: Text
    type: textarea
    size: large

```

---

<div class="post-metadata">

**Author:** ![luap](https://avatars.discourse-cdn.com/v4/letter/l/45deac/32.png) [@luap](https://forum.getkirby.com/u/luap)\
**Post date:** [April 10, 2019, 4:15pm UTC](https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745/11 "2019-04-10T16:15:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [April 10, 2019, 4:18pm UTC](https://forum.getkirby.com/t/page-builder-not-displaying-images-at-all/13745/12 "2019-04-10T16:18:10Z")

</div>

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