Image blocks: add pattern background

[distantnative]

This PR …

Enhancements

• Image/Gallery blocks: added back option to specify an image background, e.g. to be able to see white graphics with transparent backgrounds

Docs

fields:
  blocks:
    type: blocks
    fieldsets:
      - type: image
        back: pattern-light

For review team

• Add changes & docs to release notes draft in Notion

[tobimori]

Maybe it'd be possible to toggle this via a blueprint option? I think it's a good thing, especially with the dark mode coming up, but most of my blocks don't need it as you figured.

[bastianallgeier]

I also think that this could/should be a toggle. Maybe to even toggle between white/black/pattern.

[distantnative]

@bastianallgeier like an actual toggle field? The issue right now is that I wanted to rather add it as a fieldset blueprint option. However, I realized that fieldsets do no allow passing any custom options: https://github.com/getkirby/kirby/blob/main/src/Cms/Fieldset.php#L204-L219

[bastianallgeier]

@distantnative I was thinking of a toggle in the block preview component. I would not connect it to the blueprint

[distantnative]

@bastianallgeier but if it's not a fixed state, one would have to change the toggle e.g. for a white transparent graphic to pattern each time loading the view. Or would we try to store that in localStorage?

[bastianallgeier]

Do you think it's going to get too messy to put it in localStorage? I think that would be quite nice as a solution.

[distantnative]

I think the localStorage part could work. Just thinking of the UI of this toggle, won't be so easy as it would have to float on top of the image, or what do you have in mind?

Screen.Recording.2024-05-12.at.12.43.38.mov

[bastianallgeier]

I think it really looks good already. I wonder if we should use the background on the entire width or really only for the image. We could maybe reuse https://lab.getkirby.com/public/lab/components/frames/4_color to create a little square button in the bottom right corner instead of the text button. Maybe together with a dropdown arrow.

[tobimori]

I would go with the entire width. Looks better.