jg / kirby-wrappers
Kirby Wrapper Tags
Installs: 710
Dependents: 0
Suggesters: 0
Security: 0
Stars: 19
Watchers: 3
Forks: 3
Open Issues: 2
Type:kirby-plugin
Requires
This package is auto-updated.
Last update: 2024-04-08 15:51:01 UTC
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