jg/kirby-wrappers

Kirby Wrapper Tags

v2.0.1 2020-07-08 06:22 UTC

Requires

• getkirby/composer-installer: ^1.1

MIT

• Jon Gacnik

README

Simple wrapper tags for Kirbytext.

(wrapper)(/wrapper) → <div class="wrapper"></div>

Installation

composer require jg/kirby-wrappers

Other installation methods

Download

Download and copy this repository to /site/plugins/kirby-wrappers.

Git submodule

git submodule add https://github.com/jg/kirby-wrappers.git site/plugins/kirby-wrappers

Example

Let's create a columns wrapper.

config.php

return [
  'jg.wrappers' => ['columns']
];

kirbytext

(columns)
  - One
  - Two
  - Three
(/columns)

output

<div class="columns">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</div>

Configuration

You can specify wrapper tags as Strings or Arrays with wrapper, class, tag, and attributes keys. Arrays are useful when you want the tag and the associated classname to be different, or you want to use a tag other than div.

config.php

return [
  'jg.wrappers' => [
    'center', // ← simplest
    [
      'wrapper' => 'gallery',
      'class' => 'image-gallery',
    ],
    [
      'wrapper' => 'card',
      'tag' => 'article',
    ],
    [
      'wrapper' => 'toggle',
      'attributes' => [
        'data-component' => 'toggle'
      ]
    ],
    [
      'wrapper' => 'modal',
      'class' => false // ← pass false to disable class
      'attributes' => [
        'data-component' => 'modal'
      ]
    ]
  ]
];

kirbytext

(center)(/center)
(gallery)(/gallery)
(card)(/card)
(toggle)(/toggle)
(modal)(/modal)

output

<div class="center"></div>
<div class="image-gallery"></div>
<article class="card"></article>
<div class="toggle" data-component="toggle"></div>
<div data-component="modal"></div>

Passing Data

You can optionally pass additional data into data-attributes:

kirbytext

(gallery size: large)(/gallery)

output

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

Nesting

Does nesting work? Yep.

kirbytext

(outer)(inner)(/inner)(/outer)

output

<div class="outer"><div class="inner"></div></div>

Why?

This is handy if you need to wrap content in Kirby to do fancy stuff with js and css.

Notes

• Kirby 2 version found under the k2 branch