How to get more than one image into a Gallery Block?

Is it possible in the Panel to have more than one image in a Gallery block? At the moment I can only upload/select one image per Gallery block. This isn’t what I was expecting and I’m therefore unsure what the difference is between a Gallery block and an Image block.

Assuming it is possible to have more than one image in a Gallery, is it possible to display these images, in the panel, in a grid, like a gallery? i.e. have three or four images in a row and be able to reorder the images between rows and the order of the images simply reflows between rows?

Thanks!

Yes that’s definitely possible and the idea behind the gallery block. We need to see your blueprint definition in order to find out what’s going on. You can paste it here and put ``` before and after to create a code block.

Thanks

title: Default Page

fields:
	guitar_gallery_block:
		type: blocks
		fieldsets:
			- gallery

I’ve also tried

title: Default Page

fields:
	guitar_gallery_block:
		type: blocks
		fieldsets:
			- gallery
		preview: gallery

I don’t know if preview: gallery is a thing?

I can only add one image per Gallery block, and the blocks are stacked one on top of the other in what will be a very long list:

2b997c68e85c94bdd0ce42cb0d14ff5405aea9df_2_125x500

I’ve straight up copied your code into a fresh Kirby plainkit and the gallery block works as expected. I can upload and select multiple images:

From your screenshots it looks like you’ve added multiple gallery blocks, each with one image only. What you want to do is upload multiple images at once, or edit an already created block to add images to it.

If you double click on the already created block (or click on it once to select it, then click on the pen icon), the editing drawer which you can see on my screenshot should open. There you can add more and remove images.

1 Like

Hey, thank you! I had no idea that’s how it worked.

Unfortunately it still isn’t doing what I want:
• Each image needs a caption editable in the panel (not in the file metadata)
• The editor will need to reorder the images (preferably not in the editing draw, which I think the client will find confusing)

I was hoping the gallery block would display in the panel like a gallery (in a grid):

I’ve tried using the ‘layout’ with image blocks. Setting four columns per row. But when I move/reorder an image block into a row, the images don’t naturally reflow into subsequent rows, but a new row is created. Making it very time consuming and tricky to reorder the blocks/images.

I’ve also tried a structure field, but the images are displayed as ‘lists’, so are almost impossible to see the differences between the images.

Any ideas?

For this you’ll need to add / edit the individual file’s blueprint. There you can add captions which you can then use in the frontend.

If you upload a file to a gallery block, they get a template assigned by default. The template is called blocks/image. You can learn about file templates and their corresponding blueprints here. For the mentioned template you would need to create this blueprint file: /site/blueprints/files/blocks/image.yml. (The panel will tell you this as well when you click on one of the uploaded images.)

That’s possible in the files field of the opened editing drawer. (Not in the preview, when you just have the blocks field in front of you.)

You’ll find a more convenient grid view there too!

For this you’ll need to add / edit the individual file’s blueprint. There you can add captions which you can then use in the frontend.

That’s possible in the files field of the opened editing drawer. (Not in the preview, when you just have the blocks field in front of you.)

The problem is the client won’t want to have to click on each image to add captions in the files blueprint. They need to see the captions, all together, in one place. Also, this will be a step beyond them. And similarly they would much prefer to reorder images in the preview and not in the editing draw.

I need to make the editing experience as easy as possible… I think I’ll go back to a custom block (made up of a files field and a text field), which are stacked one on top of the other. The client can then edit them and rearrange them without the editing draw or editing a files blueprint.

It’s a shame blocks can’t have a width (say 1/4) and then float up next to each other (like fields can have a width and float next to each other).

Thanks for your help

1 Like

This is of course also possible with Kirby.
However, it makes sense and has advantages to enter the information in the file blueprint. The image infos (caption, alt text) should be assigned to the respective image and not to the page.
Here you can see where the caption from the file blueprint is displayed in the overview:

1 Like

Thanks