Starterkit gallery

Hi, I’ve set up a test site for v4 using the starterkit, I want to see how everything works. I haven’t changed anything, other than create a panel account and the edit to a post below, but something looks wrong with the gallery.

I’ve added a gallery to the sample post “Exploring the Universe” and in the panel it responds to the settings I choose, but when I publish, it’s just a bulleted list with the three images. When I look at the code there doesn’t seem to be any specific styles set for any gallery setting, so it looks like something isn’t working. I downloaded kirby last night, it’s saying ‘up to date’ in System (4.0.1)

Output of gallery:

Panel:

The published page:

This was in Safari, tried it in Chrome too, same result.

Just tried on the ‘live demo’ on the Kirby site, it gives the same result there too.

That’s right, the Starterkit doesn’t come with any styles for a gallery.

The frontend is totally up to you to style and mark up as needed. The Starterkit just comes with some examples, it’s not meant to be a full-fledged theme.

I mean that it doesn’t even add a class to say this is a gallery. It’s just figure tag and a ratio. That’s my main point, surely you use figures elsewhere for images. I’d expect to write my own CSS for a theme but not to have to edit the PHP of a core feature just to be able to get it working?

edit: Also, if I was to edit the gallery.php to add a class to say it’s a gallery, it’s in the kirby folder so likely to get overwritten when I update.

You shouldn’t not change the core code, but add a copy in /site/snippets/blocks with the same name which will then overwrite the default block snippets. Given that there are so many ways to mark up a gallery, it wouldn’t make sense for Kirby to add anything specific. So it’s just very basic.

There is just no point in adding classes to these core block snippets, one developer uses Tailwind, the next Bootstrap, another one UIKit, or yet another one their own custom CSS stuff.

I completely understand and agree with you not being opinionated on how things are formatted, but if I’m setting ‘gallery’ in the panel there should be some indication in the code it outputs that it is a gallery?

Something as basic as class="gallery" to the figure?

As an aside, the whole presentation of the starter kit and the ‘try demo’ on the website doesn’t at all suggest that parts of it don’t work. It says ‘fully annotated’, but… it isn’t? Literally the first thing I tried didn’t work.

I don’t see that it doesn’t work, after all, it outputs a list of images inside a figure tag, so you can style this gallery based on that, even without a class attached to it.

But again: The frontend is totally yours. And the only reason why Kirby comes with those block type code snippets is to “make it work”, but in a real-life scenario you would probably overwrite every single one of these block snippets.

“Fully annotated” refers to the fact that we have added lots of information to every file in the site folder (snippets, templates, controllers, models). The purpose of the Starterkit is to give you a learning basis, to go from there.

But how can I style it well without tangled CSS, if I want a gallery caption to be different from a single image, there’s no ‘hook’. I can only infer a ul inside a figure to style the gallery. The parent selector css stuff is pretty new and I can’t rely on that in all browsers. I’m trying to avoid having custom PHP (edit:typo’d CSS) now, and you say the only option is to do exactly that, when it’s really basic to add some kind of semantic class to the blocks.

It’s really disappointing, I was so looking forward to using these things in the panel, now it’s just a load of hacks.

Do I have to make a feature request for some kind of semantic indicator of what kind of block is on the page? It’s really basic stuff.

Well, you can create a feature request. But if I were you, I would overwrite the block snippet as I already mentioned above. This is not a hack but intended to be used like this. The default block snippets are just very basic examples.

OK, that’s a pain but I’ll do that. Thanks for your help.

It’s been unnecessarily disappointing though. Can the info about the starterkit be clarified, that it doesn’t cover all the features advertised in kirby - the panel is a big deal and to hit publish and go “oh, it’s broken” is not a good experience.

Also, you say ‘intended to be used like this’, but it doesn’t say that in the guide (if it does, it’s buried). It would be very helpful to have some kind of expectation management. I’ve done a lot of custom PHP (you’ve helped enormously!) and from the way v4 is promoted I was really expecting to be able to do away with a lot of that.

I’m sorry that you are disappointed. To quote from the blocks field documentation:

And the best thing is: The HTML output is totally under your control, so it works nicely with your favorite CSS framework, e.g. Tailwind CSS and others.
(Page builder | Kirby CMS)

This is completely in line with Kirby’s philosophy: Not to make any assumptions regarding your frontend. And the blocks are parts of that, they are part of your templates, after all, and you want them to be in line with your favorite CSS framework or whatever you are using.

Not quite sure what you mean, blocks were already introduced in Kirby 3.

You’re deeply embedded in it and used to it. You know these things, they’re not made clear on the website or marketing without digging into it.

I am suggesting these things as someone who uses kirby but only occasionally makes significant changes, such as when a new version comes out like now. It’s irrelevant that blocks were introduced earlier, the way they’re promoted now is what matters.

That’s what new customers see. If an existing customer feels as disappointed as I do, there’s something wrong with your messaging.