Working on layout preview

Kirby 3 Issues 🐛
1

Hello everyone,

I am working on a project where I use the layout field and his blocks (kirby 3.5)
I created my custom blocks, created custom components to have a great preview as it was very well explained here:

Good.

I noticed that the layout field allows you to add settings fields.
That’s good, I need it to add a user-definable background color to each new line in the “grid”.
Once again, thanks the doc:

However, I would now like to manage a live preview of these settings. And there, I looked on the doc and on the forum, but I did not find anything.

Do I need to create my own custom layout field, extended from the original layout?
Isn’t it easier to simply add a method or a template to an existing component?

If anyone has a tip, that would be really cool.
Good day to all.

2

I’m trying to create my own custom layout field extending the core one.

My index php :

Kirby::plugin('ben-bach/preview-custom-layout', [
  'fields' => [
    'layoutcustom' => [
        'extends' => 'layout'
    ]
  ]
]);

My index.js :

    panel.plugin('ben-bach/preview-custom-layout', {
      fields: {
        layoutcustom: {
          extends: 'k-layout-field'
        }
      }
    });

And i get this error :

Component definition Kirby\Form\Field\LayoutField does not exist in file: /var/www/html/XXX/kirby/src/Toolkit/Component.php line: 230

That’s works with most of the components in

But not with the layout field.

An idea ?
Thanks so much.

3

Would love to add some customisation to the preview, too. Are you any further on this one?

4

Sorry for bumping this old topic, but I’ve been searching for a long time so I thought I share my approach. In my case I wanted to reflect the selected background color for each layout in the layout’s toolbar.

panel.plugin('my/plugin', {
  components: {
    'k-layout-field': {
      extends: 'k-layout-field',
      watch: {
        value() {
          // Update the color as soon as the layout settings are changing.
          this.setColor()
        },
      },

      mounted() {
        // Also set the color on start.
        this.setColor()
      },

      methods: {
        setColor() {
          Array.from(this.$el.querySelectorAll('.k-layout')).forEach(
            (layout, index) => {
              // Get the layout settings (attrs) for each layout.
              const layoutAttrs = this.value[index].attrs

              let { color } = layoutAttrs
              // This is only necessary because the color field I'm using might
              // store the color as an array of colors.
              color = Array.isArray(color) ? color[0] : color

              // Set a css variable on the layout so we can style it
              // individually.
              if (color) {
                layout.style.setProperty('--layout-attrs-color', color)
              } else {
                layout.style.removeProperty('--layout-attrs-color')
              }
            }
          )
        },
      },
    },
  },
})


.k-layout-toolbar {
  background-color: var(--layout-attrs-color);
}
2 Likes
5

Hi @arnoson did you put this custom plugin in the plugins/ folder or does this need a parent folder like panel or layout?

6

This is a normal plugin so yes, you can place it in the plugins/ folder