Execute Kirby tag within another Kirby tag

Kirby 3 Solved ✅
,
1

I am creating a very simple tag that should do the same thing as the image tag, but add some markup around the output. Is there a way I could call the image tag itself from within my tag?

Here’s what I have at the moment:

Kirby::plugin('oblik/ikarov', [
  'tags' => [
    'section-image' => [
      'html' => function ($tag) {
        $imageMarkup = '???';

        return '</div>'
        . '<div class="col-12">'
        .   $imageMarkup
        . '</div>'
        . '<div class="col-7">';
      }
    ]
  ]
]);

Is there a way I could do that?

2

You can get the original KirbyTag like this:

$tag = Kirby\Text\KirbyTag::$types['image'];
dump($tag);
1 Like
3

Yep, that did it!

Kirby::plugin('oblik/ikarov', [
  'tags' => [
    'section-image' => [
      'attr' => [
        'alt',
        'class'
      ],
      'html' => function ($tag) {
        $class = 'col-md-12 mx-0 my-5 d-block';
        $tag->class = isset($tag->class)
          ? $class . ' ' . $tag->class
          : $class;

        $image = Kirby\Text\KirbyTag::$types['image']['html'];
        $markup = $image($tag);

        return '</div>' . $markup . '<div class="col-md-7">';
      }
    ]
  ]
]);

It works perfectly!

You have to specify the attributes of the image tag as attributes of the consuming tag, though. Otherwise they are ignored by the parser and therefore don’t reach the image tag function. In this case, I only need alt and class, so I added only those.

Thank You! :heart:

4

You should be able to get the attributes in the same way, though:

  'attr' => Kirby\Text\KirbyTag::$types['image']['attr'],

Your markup starting with a closing div and ending with an opening div doesn’t really look like it could work?

5

Thanks for the tip with attr!

Nope, it works. The tag is intended for usage inside a <div class="col-md-7"></div> element. So what this tag does is it terminates that opening tag, inserts the image with a larger col number, and reopens the tag. Basically, I want to have 7-columns content, 12-columns image and then 7-columns content again.