Kirby Wrapper Tags

Plugins
1

Often find myself needing to wrap content in kirbytext to do fancier stuff with css or js. This is simply a light abstraction of a div wrapper via kirbytags:

(wrapper)content(/wrapper)

becomes…

<div class="wrapper">content</div>

You define wrapper tags in config.php

c::set('wrapper_tags', ['wrapper', 'slideshow', 'gallery']);

Read more:

https://github.com/jongacnik/kirby-wrappers

7 Likes
2

Really interesting, thank you!

A couple of months ago I was in need of something like this and came up with a similar function, but with a different approach, as I know nothing about php.

<?php
 
kirbytext::$pre[] = function($kirbytext, $text) {
  // 1. match text from (style: class-name) to (style)
  $text = preg_replace_callback('!\(style:(.*?)\)(.*?)\(style\)!is', function($matches) use($kirbytext) {
  // 2. select text in string after `: ` and save it in a variable
  $style_class = preg_split('!\:\s(.*?)\)!', trim($matches[1]));
  // 3. select text between parentheses and save it in a variable
  $styled_texts = preg_split('!\(style:(.*?)\)(.*?)\(style\)!', $matches[2]);
  $html         = array();
  // 4. parse text as kirbytext
  foreach($styled_texts as $styled_text) {
    $field  = new Field($kirbytext->field->page, null, trim($styled_text));
    $html[] = kirbytext($field);
  }
  // 5. return text
  return '<div class="' . implode($style_class) . '">' . implode($html) . '</div>';
  }, $text);
  return $text;
};

Might update it by using your technique.

3

Nice, yep accomplishing the same thing ultimately! Passing arrays into str_replace for multiple replace is one of those very handy, easily overlooked features.

Will likely extend my plugin to accept arrays for specificity. Maybe the api could look like:

c::set('wrapper_tags', [
  [
    'tag' => 'wrapper',
    'classname' => 'foo-wrapper',
  ],
  'slideshow',
  [
    'tag' => 'gallery',
    'classname' => 'image-gallery',
  ],
]);

so:

(wrapper)(/wrapper)
(slideshow)(/slideshow)
(gallery)(/gallery)

becomes:

<div class="foo-wrapper"></div>
<div class="slideshow"></div>
<div class="image-gallery"></div>
2 Likes
4

Thats’ really nice, and I think in a way is taking a different approach to the need of structuring a text field than Kirby Builder plugin.

I personally prefer to write my texts on a dedicated text editor and then copy pasting them on the kirby panel. Being able to quickly drop in some more structure within the same text field—mostly for visual necessity or even as you suggest to make a simple slideshow— would be great.

5

This plugin now supports specifying classname like mentioned above, as well as passing additional data into data-attributes like so:

kirbytext

(gallery size: large)(/gallery)

output

<div class="gallery" data-size="large"></div>

This should allow for creating all sorts of useful kirbytext wrappers. As always, details on the repo.

1 Like
6

Any plans to update this plugin to work with Kirby3?

7

You don’t really need a plugin as such, I use the following custom kirbytag myself, which can be tweaked to suit your needs. It works in both Kirby 2 and Kirby 3.

'box' => [
    'attr' => [
        'class'
      ],

    'html' => function($tag) {
      switch ($tag->attr('box')) {
        case 'open':
          $markup  = '<section class="box ' . $tag->attr('class') . '">';
          break;
        case 'close':
          $markup  = '</section>';
          break;
      }
      return $markup;
    }
],

Use it like so in a text area:

(box:open class: myawesomebox)

Some text or whatever content.

(box:close)

Whatever is in side will get wrapped in a section tag with your class on it.

1 Like
8

We use a different approach using custom html tags on the getkirby website for boxes: https://github.com/getkirby/getkirby.com/blob/master/site/plugins/maki/hooks.php

<info>
Some info here
</info>
9

Good suggestions all around! (nice straightforward solve @jimbobrjames)

I suppose the still handy thing with the wrapper plugin is the auto data attributes, but that would also be easy to pull into any of the solutions just mentioned as well. That said, updating this for k3 is still a good idea but I haven’t been doing as much Kirby dev of late, and I tend to publish/update plugins as needs come up in projects I work on. Hopefully I’ll be able to get around to it soon, in the meantime feel free to fork or dig around the src yourself, it’s a pretty straightforward solution! :v:

10

Finally got around to updating this for Kirby 3: https://github.com/jongacnik/kirby-wrappers

Cleaned up the options, and you can now pass in arbitrary attributes to tags as well.

Cheers :clinking_glasses:

1 Like