Show Layout Settings in the Panel-Preview

[phrank]

Hey there,
i love using Layouts with Blocks. With the cookbook for the block factory its very brilliant to create modular pages.

One thing i would love to do is the following:
inside the settings-drawer for the layout-blueprint i added some custom fields like background-color or spacing options. But is there any way to show those settings in the blueprint?

For example: Inside a custom block i can define a field for background-color and with Vue.js i add a class to the template for the panel. Now i can style it via css. Is something similar possible for the Layout-Settings output?

I hope you understand this

[pixelliquid]

This is an older post, but I’m curious if you - or anyone - tackled this. I’m in need of a preview as well; there is a switch to show parallax image(s) as background. But when there is no Block in the layout defined the layout looks empty - I like to show the (first) backgroundimage in the panel as preview so client is not inclined to accidently delete this layout because it looks empty

[LordCanis]

Hey,

I created a plugin for my blog. In the template in index.js I assigned a class to the elements and styled this class as follows. In my example it is a banner image with a heading.

site>blueprints>blocks>banner.yml

fields:
  banner_img:
    label: Bild
    type: files
    max: 1
    layout: cards
  
  banner_opacity:
    label: Deckkraft des Bildes
    type: select
    default: 100%
    options:
      0.1: 10%
      0.2: 20%
      0.3: 30%
      0.4: 40%
      0.5: 50%
      0.6: 60%
      0.7: 70%
      0.8: 80%
      0.9: 90%
      1: 100%
 
  banner_hl:
    label: Überschrift
    extends: fields/ueberschrift
  
  banner_hl_align:
    label: Ausrichtung der Überschrift
    type: toggles
    labels: false
    options:
      - value: left
        icon: text-left
      - value: center
        icon: text-center
      - value: right
        icon: text-right

site>plugins>banner-block>index.js

panel.plugin("YOUR PLUGINNAME", {
  blocks: {
      banner: {
        computed: {
          image() {
            return this.content.banner_img[0] || {};
          }
        },
      template: `
      <div>
        <img
          class="block-banner-img"
          :src="image.url"
          width="100%"
          height="auto"
        />
        <div>
          <h3 class="block-banner-hl">{{content.banner_hl}}</h3>
        </div>
        <component :is="'style'">
          .block-banner-hl{text-align:{{content.banner_hl_align}} }
          .block-banner-img{opacity:{{content.banner_opacity}} }
        </component>
       </div>
      `
      }
  }
});

I don’t know if this is the ideal solution - it works for me.
I’m always happy about suggestions and improvements!!

Best regards

[phrank]

Thanks for sharing this!

What you mentioned here is fine to display the settings of a custom block. I uses this as well in my previous setups, but it doesnt help to get the informations from the layout settings. because they are not part of the block.

i like the wysiwyg aproach in the panel, but since using kirby four i changed all my custom blocks to use preview: fields instead of creating a whole vue-view for every block. its very time consuming.

Anyway it would be awesome to have the option to give a class to the layout-element in the panel to show that it has a background color or something like that…

[LordCanis]

Oh I missed that you need this options for the Layout Sorry!
You’re absolutely right - it would be awesome to have the option!

Thank you for the “preview: fields” tip but when I need a “real preview” (like the image with an opacity) i have to work with the vue-view!
Or am i wrong?

Thank you for your feedback!

[phrank]

yes thats true. if you need a real preview you should write yourself a vue-view.
I personally think its ok in the panel to just have all options and see the fields inside the layout grid. Therefore i made blueprints with two tabs for each block. One with content and one with settings. So i dont have to open the drawer everytime i want to change something like text alignment.

Have a look:

[texnixe]

To make use of the settings in the layout preview, you would have to overwrite/extend the Layout.vue component.

[LordCanis]

For me personally this is an acceptable and good way to quickly edit the fields, but for most customers and colleagues a wisiwyg view is easier

[LordCanis]

Thank you - I’ll try it and report back