Using kirbyTags

Kirby 4 Solved ✔️
1

Hi! I built my own plugin following the examples, but I have some trouble using kirbyTags. I would like to have a div with a class, so I can pass the class and the content.

This is my plugin:

<?php

Kirby::plugin('plugin/components', [
    'tags' => [
        'attr' => [
            'class'
          ],
        'components' => [
            'html' => function($tag) {
                return '<div class="gallery ' . $tag->class . '">' . kirbytext($tag->value) . '</div>';
            }
        ]
    ]
]);

But I’m unsure of how to write the content for class and main value from my text area so to apply what I pass where they belong. Something like this doesn’t seem to work, so I’m unsure how to format things up.

(My div contains a serie of images and would like to pass also an additional class)

(class: class, components:
(image: 2-hierarchy-1@2x.png caption: Primary)
(image: 2-hierarchy-2@2x.png caption: Secondary)
(image: 2-hierarchy-3@2x.png caption: Tertiary)
)
2

Hm, this setup is somehow completely wrong.

  1. Under tags, you need a name for your kirbytag,
  2. Then, a kirbytag has exactly 2 array elements: attr and html, not components.

Please see the documentation for the basics: KirbyTags | Kirby CMS

You can find example custom kirbytags in the source code of our website: getkirby.com/site/plugins/site/extensions/tags.php at main · getkirby/getkirby.com · GitHub (note that they are registered a bit differently)

I’m not sure that this nested approach will work well. It might make more sense to do something along the lines of the columns extension: Kirbytext columns | Kirby CMS

3

Thanks. I did take a look at the kirbyTags documentation. I actually made a mistake when pasting the code above.

I also think that Columns go a bit beyond what I need, and my skills to solve it.

What I would basically would like to achieve is have a wrapper div with a class that I can define from my textarea; and to use any content I want inside that div (images in this case).

A previous implementation that just used a value (images) and no class worked well like this — note that components is the name of the kirbyTag.

(components:
(image: 2-hierarchy-1@2x.png caption: Primary)
(image: 2-hierarchy-2@2x.png caption: Secondary)
(image: 2-hierarchy-3@2x.png caption: Tertiary)
)

I took a look at the source code of your website, and perhaps will keep exploring it and try to figure it out.

4

Something that could work well for your use case without any coding involved is to simply use html inside your textarea

<div class="someclass">
(image: 2-hierarchy-1@2x.png caption: Primary)
(image: 2-hierarchy-2@2x.png caption: Secondary)
(image: 2-hierarchy-3@2x.png caption: Tertiary)
</div>
5

Thank you! I might as well go ahead and do that. Initially, I was a bit hesitant about blending HTML markup with more “plain” content, but I might end up incorporating it after all.

6

I’m sorry @texnixe, I wanted to ask you something else. What would be the best approach to make a “component” that I can use in a text area? Something that I can reuse several times across the same page.

For example, to have a “component” that contains a header, an image, and some paragraph.

Using html markup in the textarea doesn’t seem so ideal, since the layout I would like to have is a bit more complex than just wrapping things up inside a container.

So I would like to see how to achieve this in Kirby in a way that the content in the text area remains as cleans as possible, and the layout is handled somewhere else.

Apologies if any of what you have mentioned was already the answer to this. Since I’m a designer who is learning more complex front-end, I would appreciate if you had perhaps any examples to share?

7

Do you mean a component with fixed content and structure that does not change? Then you could use placeholders. Or does it have to be configurable somehow?

8

The content varies, so placeholders won’t do the trick here.

What I need is a system similar to how images are inserted into a textarea – they can have different parameters each time, and I can place them wherever I want while keeping the HTML layout consistent.

Essentially, I want to be the one defining the parameters and the HTML.

So, in my text area, I’d input something like this:

(custom component: 
title: A headline goes here
description: Some other text
image: (image: file.png))

It might not make much sense in terms of formatting, but it’s to show what I’m aiming for.

Using this setup, I could add these components to different pages within the text, each with its own content.

Does that sound achievable?

I’ve considered using Blocks and creating something custom. However, I’m unsure if that would be effective. Plus, I’m not entirely convinced about having to make all the edits through the panel and not opening the .txt in any text editor.

9

Well, you can create such a custom kirbytag, e.g. call it component with several attributes like title, description etc. Make sure to just pass an image name, not a kirbytag as image, that just complicates things.

(component: xxx title: some title description: some description image: image.png)

In order not to waste the component, you could put a snippet name for xxx, or leave it blank or remove the title attribute and put the title after component. Up to you.

Then inside the html prop, use a snippet or enter the html manually.

Again, see all the examples in the getkirby.com repo I mentioned above.

10

Thanks! I will take a deep look at the examples you sent. Thanks for sharing a possible approach. I will keep exploring and experimenting!