Creating Snippets for reuse

Kirby 3 Questions 🤔
1

Hi Community,

we have this default yml file for creating our page content. in this yml we already included some snippets for “text”, “image”, etc. our goal is now to create more snippets e.g. for the “settings” tab and in the best case for the whole “builder”.
if i try to create a snippet for the Settings Tab like this:

settings: tabs/section-settings

i always get this error:

Illegal string offset 'fields'

could you please help us finding the error and to modularize the blueprint more.

title: Default Page
preset: page
fields:
  mybuilder:
    label: Seiteninhalt
    type: builder
    columns: 1 # Optional. If set to 2 or more, the builder blocks will be places in a grid.
    #max: 10 # Optional. Limits the number of builder blocks that can be added.
    fieldsets:
      section:
        label: Section <strong>{{identifier}}</strong>
        tabs:
          content:
            label: Inhalt
            icon: edit
            fields:
              sectionfields:
                type: builder
                label: Section Content
                fieldsets:
                  bodytext: blocks/bodytext
                  img: blocks/img
          settings:
            label: Settings
            icon: cog
            fields:
              identifier:
                label: ID
                type: text
                width: 1/2
                placeholder: ID
              animation:
                label: Animation
                type: select
                width: 1/2
                options:
                  fadein: FadeIn
                  fadeinup: FadeInUp
                  fadeinupbig: FadeInUpBig
                  fadeinleft: FadeInLeft
                  fadeinleftbig: FadeInLeftBig
                  fadeinright: FadeInRight
                  fadeinrightbig: FadeInRightBig
              style:
                label: CSS Klassen
                type: checkboxes
                width: 1/2
                options:
                  text-white: weiĂźer Text
                  is-full-height: Full Height
                  is-middle: vertikal zentriert
                  is-bottom-sm: mobil bottom
              container:
                label: Container
                type: radio
                width: 1/2
                default: container
                options:
                  container: normal
                  container-stretched: volle Breite 
                  container-stretched-paddings: volle Breite mit Abstand
              info:
                text: **Bitte beachten!** Parallax funktioniert nur bei Auswahl eines Hintergrundbildes. Hintergrundfarbe funktioniert nur ohne Hintergrundbild.
                width: 1/1
                type: info
              bgcolor:
                label: Hintergrundfarbe
                width: 1/3
                type: select
                options:
                  bg-primary: Primärfarbe
                  bg-dark: Dunkel
                  bg-bright: Hell
              bgimg:
                label: Hintergrund-Bild
                type: files
                multiple: false
                width: 1/3
              parallax:
                label: Parallax-Effekt?
                type: toggle
                width: 1/3
      quote: blocks/quote
      bodytext: blocks/bodytext
      events: blocks/events
      img: blocks/img

Thanks!

2

i tried to rename the snippet without using the dash, too.
still the same error.

3

What have you put into the blueprint snippet? Testing builder yaml files is always a bit difficult without all the snippets.

In this context the dash would have been ok, anyway, because it’s not a field/section key.

4

i extracted this into the snippet

label: Settings
  icon: cog
  fields:
    identifier:
      label: ID
      type: text
      width: 1/2
      placeholder: ID
    animation:
      label: Animation
      type: select
      width: 1/2
      options:
        fadein: FadeIn
        fadeinup: FadeInUp
        fadeinupbig: FadeInUpBig
        fadeinleft: FadeInLeft
        fadeinleftbig: FadeInLeftBig
        fadeinright: FadeInRight
        fadeinrightbig: FadeInRightBig
    style:
      label: CSS Klassen
      type: checkboxes
      width: 1/2
      options:
        text-white: weiĂźer Text
        is-full-height: Full Height
        is-middle: vertikal zentriert
        is-bottom-sm: mobil bottom
    container:
      label: Container
      type: radio
      width: 1/2
      default: container
      options:
        container: normal
        container-stretched: volle Breite 
        container-stretched-paddings: volle Breite mit Abstand
    info:
      text: **Bitte beachten!** Parallax funktioniert nur bei Auswahl eines Hintergrundbildes. Hintergrundfarbe funktioniert nur ohne Hintergrundbild.
      width: 1/1
      type: info
    bgcolor:
      label: Hintergrundfarbe
      width: 1/3
      type: select
      options:
        bg-primary: Primärfarbe
        bg-dark: Dunkel
        bg-bright: Hell
    bgimg:
      label: Hintergrund-Bild
      type: files
      multiple: false
      width: 1/3
    parallax:
      label: Parallax-Effekt?
      type: toggle
      width: 1/3
5

The indentation is wrong. icon and fields should not be indented but on the same level as label

6

thats right! unfortunately not the real problem.
the error ist still there. :frowning:

7

Hm, I’m not sure really sure how this works in the builder. Have you tried to add a tab name:

settings:
  label: ...
  icon: ...
  fields: ...
8

i have set a label, isn’t it the tab name?

maybe a short question by the way. i come from the systems like typo3 and wordpress. there it was “normal” for me to use various content elements in any order.
is this possible in kirby without using the builder?

9

Have you checked out in what way the editor could be of use to you? It doesn’t have as many block types as for example the WP Editor but is extendable with your own editor plugins: GitHub - getkirby/editor: A new type of WYSIWYG editor for Kirby. It’s currently only available as plugin but will make it to the core eventually.

The builder will btw come to the core soon, its currently in Alpha.

No, the label is not the tab name, settings is your tab name. But as I said, I have never used tabs in my projects with the builder, so I’m not really familiar with what you can or cannot do here.

10

i have tried the editor and it is a cool alternative of course. but the “content” which is stored in the txt files does not convince me. i think it isn’t really possible to edit the content without the panel after using the editor.

so we set on right horse? :slight_smile: could you forecast when it will be in core? will there be big changes or will it be unproblematic if we continue working with it now?

11

Like in the editor, content will be stored in json format for performance and other reasons. Most stuff should be compatible, though. Tabs will be extendable ( which probably means that they are not now, and your example will not work). Columns will not be supported (but there will be a replacement for columns). No previews in the first version.

I actually think that most people won’t want to manually edit content that is as complex as content stored by the editor or the builder fields. So personally I am very much in favor of this decision.