Best practice text/image combined?

Kirby 3 Solved ✅
1

I am creating my second kirby website. A rather complex onepager. Following the way suggested in the cookbook.

There are two sections which consist of mixed image/text content looking like the image below or similar (more text, images in between). I need a good representation of it in the panel and the ability to add, move and remove sections (image/text pair) in the panel.

29
Bildschirmfoto 2019-04-09 um 12.26.29.png245×790 4.79 KB

What I need

  • A nice panel design working for absolute non tech users.
  • position images next to each other if portrait
  • Img srcset
  • Lazyloading

Three ways of doing this came to my mind:

Creating subpages for each text/image pair
  • Pro: I’d know how to do it
  • Pro: No problem for styling etc.
  • Con: unintuitive UX for user
Using Kirbytext
  • Pro: all in one place
  • Con: srcset and lazyloading might be complicated
  • Styling complicated / impossible (wrapping images in a div etc.)
Using Pagebuilder

Don’t know if its really possible what I want to archive because I failed writing a snippet that loads all the builder stuff.

So which way should I go or do I miss anything completely?

Thanks in Advance!

2

I strongly recommend the builder plugin: https://github.com/TimOetting/kirby-builder

Using subpages or a combination of both could also be an option.

1 Like
3

Ok, thanks for that clear answer.

How do I than fetch the builder field inside one snippet? I might have a misconception about it, but this is the code provided in the plugins readme:

<?php # /site/templates/yourtemplate.php
foreach($page->mybuilder()->toBuilderBlocks() as $block):
  snippet('blocks/' . $block->_key(), array('data' => $block));
endforeach;
?>

As far as I understand this, the builder “requires” a template, the onepager in the cookbook relies on snippets.

Is it possible to fetch the builder content with snippets?

4

These blocks are the snippets, in this case they get stored in a subfolder (blocks) of the snippets folder

5

I finally understood it! I have to write a snippet.php for each corresponding snippet in the builder. Fine, but now my code looks messy, e.g.

<section class="info"></section>
<section class="images"></section>
<section class="text"></section>
<section class="images"></section>
<section class="text"></section>
<section class="images"></section>
<section class="text"></section>
<section class="images"></section>
<section class="text"></section>
<section class="images"></section>
<section class="about"></section>
...

instead of:

<section class="info"></section>
<section class="page-builder">
  <div class="images"></div>
  <div class="text"></div>
  <div class="images"></div>
  <div class="text"></div>
  <div class="images"></div>
  <div class="text"></div>
</section>
<section class="about"></section>

So how do I wrap all snippets in one section?

6

My fault, works just fine! Forgot to actually wrap the page-builder…