Editor: Use of snippet inside editor or custom gallery-block

Kirby 3 Solved ✅
1

I’m using the new editor and would like to know if I can use a snippet inside the editor, for example, a {{gallery}} snippet?

Alternatively, I thought that I could put together a custom-block. I can do a simple custom-block, but really would require a custom-block that lets me choose an existing gallery from a dropdown. I’ve started on this, but going from the example block snippets and the timeline-block I’m not really making any progress, as I don’t understand the required code well enough. Has anyone started on something like this?

tina

2

You can do it with a snippet, which you can use in the Kirbytext block. If you make a custom tag like this…

<?php

return [
  'attr' => [
    'snippet'
  ],
  'html' => function($tag) {
  	$snipfile = $tag->attr('snippet');

  	return snippet($snipfile);
  }
];

You can call a snippet with (snippet: yoursnippetname) inside the Kirbytext block. As a bonus, this tag will also work inside a regular Textarea field.

As for a proper block for galleries, im not aware of anything that does that yet, or anything close that you can use as a starting point. A work around could be to put a files field on another tab which will give you a visual way to set the images and the order of them. Then use the snippet tag above to place it and render the code in the Editor output.

The example above is bare minimum. You might want to extand it a little bit with some extra tag options like the name of the field you used for the gallery images etc.

1 Like
3

If using Kirbytext was enough, you could just put the {{ gallery }} placeholder in a Kirbytext block and it would render just as well as in a normal textarea field without you having to create an additional tag.

For a custom block, I guess you would have to include a select field in the template and the required logic, but I don’t have enough Vue knowledge to lend a helping hand with this.

1 Like
4

Thanks very much to both of you :smiling_face_with_three_hearts: Got it working.

My mistake was (bowing my head in shame) that I spellt the snippet wrong in the Kirbytext block … I entered {{gallery}}, instead of {{ gallery }} (note the spaces between the brackets). This got me wrongly thinking that snippets might not work in the editor, but indeed they do.

It’s a workable solution, but not a perfect one … thinking ahead -> what if I want to have 2 albums (set of pics) in my article … guess then I’d have to make a second snippet, or perhaps I can somehow pass the album name to the snippet instead of selecting it (as in the kirby download example).

If someone with good vue knowledge would consider making a custom gallery block for the editor some time, I am sure it would be very useful and popular.

Anyway happy for now :slight_smile:

5

Yes, that would be possible, either by passing an argument to the Kirbytag solution @jimbobrjames suggested or via the placeholder thing:

{{ gallery: some-gallery }}

You would have to adapt the regex of the gallery hook accordingly to fetch the part after the colon and get the gallery from it.

6

cool, thanks Sonja, I’ll give that a try :slight_smile: