Panel Blocks field – horizontal arrangement possible?

Kirby 3 Questions 🤔
#1

Hi!

In the Blocks field, is it possible to have the blocks be arranged horizontally instead of vertically?

I want to use the blocks as a gallery. There is the gallery block, however it only supports images and not a mix of videos and images. So I limited the block types to image and video – they’re sortable as usual, however they display vertically.

If I try to change the arrangement to horizontal via custom CSS, the sorting mechanism fails.
Also the layout field is probably the wrong tool for that. (?)

This is how the vertical arrangement looks like now:

Bildschirmfoto 2021-01-12 um 17.40.52
Bildschirmfoto 2021-01-12 um 17.40.52716×1776 161 KB

Trying to achieve this arrangement:

Bildschirmfoto 2021-01-12 um 17.51.23
Thanks for any input!

#2

Why? I think the layout field is exactly what you need.

Or a custom components based on the gallery block that accepts different file types.

#3

As from what I understand the layout field needs a predefined column layout?

#4

That’s correct, see my addition above.

This is the yaml for the gallery


name: field.blocks.gallery.name
icon: dashboard
preview: gallery
fields:
  images:
    label: field.blocks.gallery.images.label
    type: files
    multiple: true
    layout: cards
    size: tiny
    empty: field.blocks.gallery.images.empty
    uploads:
      template: blocks/image
    image:
      ratio: 1/1

As you can see, it uses the blocs/image file blueprint to limit the file types. If you use a different file blueprint, you can change what a user can choose.

And you would of course have to adapt the corresponding snippet to display the stuff…

#5

Thx!
But extending the blueprint so that video file types are accepted doesn’t show a preview of the video file then hosted on youtube or similar, no?
It will accept a .mp4 for instance but it will not display it inside the gallery, or am I misunderstanding it.

#6

The Panel preview needs to be changed as well, that’s right

#7

Hm, I guess that’s too complicated for me although it sounds not complicated at all. Thanks though! :smiley:

#8

Maybe something for a rainy day, but you will never find out if you don’t try :wink:

1 Like
#9

That’s true! :smiley:

Anyways, I DID solve it via CSS now.

(It didn’t work before because when dragging an image via its handle, the mouse cursor has to actually touch the other image you want to swap. When dragging, my mouse cursor was outside the other image because the handle is outside the image as well.)

TL;TD
CSS flex-box :man_facepalming: