What possibilities does the layout function offer to assign a background image to a <section> element?

Kirby 3 Questions 🤔
1

What possibilities does the layout function offer to assign a background image to a <section> element?

For this function, I “abuse” the layout settings., but it has a drawback (more on that later):

  • I create a new 1-column layout.
  • In the layout settings, I select an image and specify other settings, including a parallax effect and image darkening

parallax-settings
parallax-settings1598×1216 65.6 KB

This works perfectly and the background image is displayed:

<section class="parallax" data-parallax-background-ratio="0.5" style="background-image:url('http://localhost:8888/mylocalfolder/media/site/2216db88ad-1695359027/background.jpg')">

Now I come to the downside:
In the panel, the layout looks empty, because the configuration was done exclusively under the settings.

parallax-layout
parallax-layout1884×896 68.6 KB

So I can’t see if a background image was assigned to the layout yet.
And the image is not displayed as a preview either. This is not optimal.

Question:
Did I choose the wrong way to do this?
Have I made things unnecessarily complicated for myself?
Is there a better way to do this?

I do not show the codes of the Blueprint and Template here, because my question is oriented to the approach. My solution works, but it is not perfect.

2

There is no way to create previews for layout field items, you can only create block previews. Or at least I don’t know if it is possible somehow.

There is a plugin that uses the blocks field to create layouts, which would allow you to use block settings: Grid Block | Kirby CMS

In view of the new layout options that will come to K4 (easily change between layout types, for example), I would use this with caution.

1 Like
3

Thank you so much for your quick reply. This is crazy. You’d think you were already reading along while I was writing my question here :slight_smile:

Thanks for the tip for the plug-in. Especially in relation to Kirby 4, I would like to use as few plug-ins as possible.

I guess there is no other efficient way to assign a background image than the way I chose?

Background images are rarely used on my site, so I’m fine with the “workaround”. I just wanted to know if there is a better way to do this.

UPDATE
To make the empty box recognizable that it is not empty I have now added a info-text.
This text will be ignored in the output.

layout-hinweis
layout-hinweis1754×346 13.2 KB