For a gallery of items, I have a custom block for each item. In the Panel I would like to display more than one block in a row. At the moment each block is stacked, one on top of the other, in a very very long list. I want them to display in the Panel in a grid.
I’ve tried width: 1/4 but it doesn’t work.
fields:
guitar_blocks:
type: blocks
label: Gallery
pretty: true
fieldsets:
- type: guitar
name: Guitar
width: 1/4
preview: fields
wysiwyg: true
fields:
guitar_for_sale_photo:
label: Photo
type: files
uploads: portrait-images
help: Don't upload files over 4MB
multiple: false
guitar_for_sale_description:
type: writer
I’ve now also tried the Gallery Block that comes with Kirby.
fields:
guitar_gallery_block:
type: blocks
fieldsets:
- gallery
width: 1/4
But the blocks are still not “floating” up to sit in the same row. They are stacked:
The width option in the blueprint controls the width of the field in the panel. It’s not related to how it is output on the front end. (the output layout is up to you)
I thing probably instead you want to use layouts and blocks which let you define columns inside rows as need.
Another option would be to output the blocks into a parent container and use css grid / flex box to to make the chidlren fall into 1/4 width columns.
Hey, thanks. Yes I’m looking to control the width of the blocks in the panel.
I’ve just had a quick go at the ‘Layouts’ and blocks. It kind of does what I want, but in the Panel it’s tricky to reorder blocks from one row to another. The blocks don’t automatically reflow, from one row to another row.
I think I’ll stick with the stacked blocks in the panel, which are super easy for the client to reorder. And super easy in the front end to go from say a 4 column grid, to a 3 column grid (something that looks difficult with layouts and blocks, as all the blocks in a row in the panel, in the front end are contained in a <section> – so going from 4 to 3 column grid ends up with a second row of one block).
Thanks again
Don’t know why you expect things in a row when you set the field width to 1/4. In a normal setting when using the gallery block the images are in a row in the Panel. What you do in the frontend is up to you.
In a normal setting when using the gallery block the images are in a row in the Panel.
Okay, odd, I tried the gallery block, without the ‘layout’, but in the Panel the blocks are stacked one on top of the other, making the gallery very long, and tricky to manage / rearrange the position of blocks, when you can’t see most of them. Here’s a screen grab:
I’m going to try the Structure field. This might be a better solution, if the editor can rearrange the rows in the table by dragging and dropping.
Okay, I’ve tried using the block field just with the gallery block (with no layout).
title: Default Page
fields:
guitar_gallery_grid:
type: blocks
fieldsets:
- gallery
All of the images are stacked in one column:
But in the Gallery reference page, the images are in a row:
If I add a block, it looks like there is a row for three images:
But when I edit the block to add an image and caption, it displays in the Panel as full width, stacked under the other images.
This seems less of a gallery block, and more like the image block.
How do we get more than one image inside a gallery block and for the gallery images to be displayed as a “gallery” grid in the Panel?
