Struggling to add Annotator as a Kirby Page Builder Block (Blueprint)

Kirby 3 Solved ✅
1

Hi everyone,
I want to use the plugin “Annotator” in my Kirby Page Builder.
I already got everything to work when I just set everything up on a page. But now I also want to be able to use the annotator as a builder block, because I have other blocks (fieldsets) that I want to place around the annotator section.

Unfortunately I cant seem to get the blueprint for the builder block working. When I add the annotator fieldset on my page builder, I will get errors like “Cannot read property ‘key’ of undefined” (when I used sections in line 4) or something like " Error in “annotator” field" “The field type “annotator” does not exist” (when I used fields in line 4)

    type: builder
    label: Image Pins
    columns:
    sections:
      annotator:
        type: annotator
        buttons:
          - pin
        colors:
          - blue
        theme: light
        debug: false
        max: false
        storage:
          color: color
          src: src
          markers: markers

      myfields:
        type: fields
        fields:
          src:
            label: Bildauswahl von Gallerie
            type: files
            max: 1
            width: 1/2
          markers:
            type: structure
            width: 1/2
            fields:
              mynotenumber:
                label: 'Nummer'
                type: text
              mynote:
                label: 'Text'
                type: text

On my page.yml it is called like this (image-pins):

title: Fahrzeugss
icon: file-document

sections:
  imageslider:
    headline: Gallery
    type: files
    template: gallery

  meta:
    type: fields
    fields:
        # inside the fields section of your blueprint:
      mybuilder:
        label: Page Builder
        type: builder
        columns: 1 # Optional. If set to 2 or more, the builder blocks will be placed in a grid.
        max: 10 # Optional. Limits the number of builder blocks that can be added.
        fieldsets:
          text_only:
            extends: blocks/text_only
          zitat:
            extends: blocks/zitat
          image-slider:
            extends: blocks/image-slider
          image-pins:
            extends: blocks/image-pins

I think it might be something so simple and easy that I just don’t get here?
I really do appreciate the help :weary:

2

Your syntax is wrong, you can’t use sections and columns within a field context.

For the builder, you can set the number of columns, yes, but then it needs an integer after columns e.g columns: 1.

Should be something like this:

fieldname:
  type: builder
  label: Image Pins
  columns: 1
  fieldsets:
    name_of_fieldset:
      label: Fieldsetname
      fields:
        annotator:
          type: annotator
          buttons:
            - pin
          colors:
            - blue
          theme: light
          debug: false
          max: false
          storage:
            color: color
            src: src
            markers: markers

Please always post all context, not half a field, otherwise it is very difficult to spot errors.

3

Hi, thank you for your response!

Please always post all context, not half a field, otherwise it is very difficult to spot errors.

I am very sorry, I don’t quite get what you mean by that, because I posted the content of my 2 whole .yml files. Is it because there was no fieldname, because the fieldname is called in the other .yml with “extends”? My fieldname is called “image-pins”. How can I do better next time? Please bear with me, I just started coding and asking questions in a forum this way and still need to learn some things.

Thank you for your code, but it doesn’t work for me. I get “Cannot read property ‘key’ of undefined”. I think “fields” won’t work for the “annotator”. In the original syntax from the github page it looks like this:

columns:
  - width: 2/3
    sections:
      annotator:
        type: annotator
        buttons:
          - pin
          - rect
          - circle
        colors:
          - orange
          - yellow
          - green
          - blue
          - purple
          - pink
        theme: light
        debug: false
        max: false
        storage:
          color: color
          src: src
          markers: markers

  - width: 1/3
    sections:
      myfields:
        type: fields
        fields:
          color:
            type: text
            disabled: true
          src:
            type: files
            max: 1
          markers:
            type: structure
            fields:
              (...)

So for the annotator sections is needed. But I cannot use sections in my example, because the kirby page builder calls for fieldsets, right?

title: Fahrzeugss
icon: file-document

sections:
  imageslider:
    headline: Gallery
    type: files
    template: gallery

  meta:
    type: fields
    fields:
        # inside the fields section of your blueprint:
      mybuilder:
        label: Page Builder
        type: builder
        columns: 1 # Optional. If set to 2 or more, the builder blocks will be placed in a grid.
        max: 10 # Optional. Limits the number of builder blocks that can be added.
        fieldsets:
          text_only:
            extends: blocks/text_only
          zitat:
            extends: blocks/zitat
          image-slider:
            extends: blocks/image-slider
          image-pins:
            extends: blocks/image-pins
4

Ah, ok, it is a section, not a field, didn’t see that. Anyway, since you can’t use a section inside a builder fieldset but only fields, using it inside a builder field won’t work.

5

Ah ok thank you! I hoped there was a way. I will do it the other way then :slight_smile:
Thanks for the help, really appreciated!

6

So there is no way to use the Annotator plugin with Builder?

7

No, you cannot use sections within a builder field. What you could do instead, is set the markers in the image metadata and then select those images within your builder field, if that’s an option.

1 Like
8

Oh thanks much for the idea, that might just work in my case!