Wysiwyg editable layout section?

Kirby 3
1

I am not sure if this is possible, maybe someone can help me here.

I have a layout section (on the very top level, that still has to be filled with blocks). Under settings I can give it a class, an ID and a background-image.
Now it would be perfect to be able to have the content of that layout section wysiwyg-editable (meaning, seeing the text already in front of the background), but I can’t figure out which .js and .css files I have to edit/create to achieve that.

(I tried the docs, but they are not my friends yet. I keep finding bits but falling short when it comes to understanding which files need to be changed.)

Can anyone point me in the right direction?
Many thanks in advance!

2

Content in a layout is editable just as in a blocks field as long as the blocks are inline editable.

Or do you mean you want to make the layout settings fields editable inline (i.e. without having to enter settings)?

3

I am transfering an older layout to Kirby. Right now, I am working on a “blockquote divider” type of element that’s just a section with a background image and a line of text inside.

I figured I could just work with a simple full-width layout element with a text block inside, and have the background element (and the class of the section) set in the layout section’s setting.

The text block inside should be editable as it is now, but I would love to have the background image already show, and the text styled accordingly, in the right color and centered.

When I have a custom block, I have this .js file where I can edit the wysiwyg template, and I also found out that I can alter pre-defined blocks.
What I haven’t found is how I can change the wysiwyg template of the layout section, which files I’d have to create or edit.

I hope I am making sense here. I have a feeling half of what I am working at is a bit out of my paygrade where my understanding of the inner workings of Kirby is concerned …

Thank you for your help!

4

Maybe this helps: Working on layout preview - #4 by arnoson

1 Like
5

Thank you, that seems like a similar approach to what I have in mind.
Just a few quick questions, maybe you can help me here:

These are the index.js and index.css files of a new plugin (in this case /site/plugins/plugin/ ), right?
The index.php must contain <?php Kirby::plugin('my/plugin', []);

To get this code below to work, it should be sufficient to add a text field “color:” to my page blueprint, right?

Where can I expect the CSS custom property to be set? In a style block in the panel HTML?
It seems like that is what is not working, the CSS is being applied, it just doesn’t know that variable --layout-attrs-color.
Where does the method know which of the layoutAttrs to use?

Or did I miss something earlier?

      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
              // 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')
              }
            }
          )
        },
      },
6

Did you get the background-color/-image part of the layout working? I’m facing this challenge as well. Each layout section can have a parallax image (or more to create a carousel) while standard blocks can be used to print content on top. I like to show at least something in the panel preview when a layout section has a backgroundimage defined.