# Kirby Wrapper Tags

**URL:** <https://forum.getkirby.com/t/kirby-wrapper-tags/6780>\
**Category:** Plugins\
**Created:** [February 28, 2017, 12:16am UTC](https://forum.getkirby.com/t/kirby-wrapper-tags/6780 "2017-02-28T00:16:11Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![jongacnik](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jongacnik/32/1846_2.png) [@jongacnik](https://forum.getkirby.com/u/jongacnik)\
**Post date:** [February 28, 2017, 12:16am UTC](https://forum.getkirby.com/t/kirby-wrapper-tags/6780/1 "2017-02-28T00:16:11Z")

</div>

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](https://github.com/jongacnik/kirby-wrappers)

---

<div class="post-metadata">

**Author:** ![afincato](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/afincato/32/3446_2.png) [@afincato](https://forum.getkirby.com/u/afincato)\
**Post date:** [March 6, 2017, 9:28pm UTC](https://forum.getkirby.com/t/kirby-wrapper-tags/6780/2 "2017-03-06T21:28:06Z")

</div>

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`.

```auto
<?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.

---

<div class="post-metadata">

**Author:** ![jongacnik](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jongacnik/32/1846_2.png) [@jongacnik](https://forum.getkirby.com/u/jongacnik)\
**Post date:** [March 6, 2017, 10:26pm UTC](https://forum.getkirby.com/t/kirby-wrapper-tags/6780/3 "2017-03-06T22:26:15Z")

</div>

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>
```

---

<div class="post-metadata">

**Author:** ![afincato](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/afincato/32/3446_2.png) [@afincato](https://forum.getkirby.com/u/afincato)\
**Post date:** [March 8, 2017, 10:07pm UTC](https://forum.getkirby.com/t/kirby-wrapper-tags/6780/4 "2017-03-08T22:07:25Z")

</div>

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](https://github.com/TimOetting/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.

---

<div class="post-metadata">

**Author:** ![jongacnik](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jongacnik/32/1846_2.png) [@jongacnik](https://forum.getkirby.com/u/jongacnik)\
**Post date:** [June 23, 2017, 1:57pm UTC](https://forum.getkirby.com/t/kirby-wrapper-tags/6780/5 "2017-06-23T13:57:32Z")

</div>

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

**kirbytext**

```auto
(gallery size: large)(/gallery)

```

**output**

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

```

This should allow for creating all sorts of useful kirbytext wrappers. As always, details on the [repo](https://github.com/jongacnik/kirby-wrappers).

---

<div class="post-metadata">

**Author:** ![lauri](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/lauri/32/3305_2.png) [@lauri](https://forum.getkirby.com/u/lauri)\
**Post date:** [September 18, 2019, 3:33pm UTC](https://forum.getkirby.com/t/kirby-wrapper-tags/6780/6 "2019-09-18T15:33:41Z")

</div>

Any plans to update this plugin to work with Kirby3?

---

<div class="post-metadata">

**Author:** ![jimbobrjames](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jimbobrjames/32/5802_2.png) [@jimbobrjames](https://forum.getkirby.com/u/jimbobrjames)\
**Post date:** [September 18, 2019, 5:20pm UTC](https://forum.getkirby.com/t/kirby-wrapper-tags/6780/7 "2019-09-18T17:20:35Z")

</div>

You don’t really need a plugin as such, I use the following [custom kirbytag](https://getkirby.com/docs/reference/plugins/extensions/kirbytags) myself, which can be tweaked to suit your needs. It works in both Kirby 2 and Kirby 3.

```auto
'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:

```auto
(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.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [September 18, 2019, 5:43pm UTC](https://forum.getkirby.com/t/kirby-wrapper-tags/6780/8 "2019-09-18T17:43:33Z")

</div>

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](https://github.com/getkirby/getkirby.com/blob/master/site/plugins/maki/hooks.php)

```auto
<info>
Some info here
</info>

```

---

<div class="post-metadata">

**Author:** ![jongacnik](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jongacnik/32/1846_2.png) [@jongacnik](https://forum.getkirby.com/u/jongacnik)\
**Post date:** [September 18, 2019, 6:13pm UTC](https://forum.getkirby.com/t/kirby-wrapper-tags/6780/9 "2019-09-18T18:13:15Z")

</div>

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! ✌

---

<div class="post-metadata">

**Author:** ![jongacnik](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/jongacnik/32/1846_2.png) [@jongacnik](https://forum.getkirby.com/u/jongacnik)\
**Post date:** [June 30, 2020, 4:52am UTC](https://forum.getkirby.com/t/kirby-wrapper-tags/6780/10 "2020-06-30T04:52:52Z")

</div>

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

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

Cheers 🥂