https://github.com/jongacnik/kirby-wrappers
Simple wrapper tags for Kirbytext
https://github.com/jongacnik/kirby-wrappers
kirby kirby-plugin kirby3-plugin
Last synced: 9 months ago
JSON representation
Simple wrapper tags for Kirbytext
- Host: GitHub
- URL: https://github.com/jongacnik/kirby-wrappers
- Owner: jongacnik
- License: mit
- Created: 2017-02-28T00:00:16.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-07-08T06:25:17.000Z (almost 6 years ago)
- Last Synced: 2025-02-28T09:21:02.597Z (over 1 year ago)
- Topics: kirby, kirby-plugin, kirby3-plugin
- Language: PHP
- Homepage:
- Size: 11.7 KB
- Stars: 19
- Watchers: 3
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Kirby Wrappers
Simple wrapper tags for Kirbytext.
`(wrapper)(/wrapper)` → `
`
## 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**
```php
return [
'jg.wrappers' => ['columns']
];
```
**kirbytext**
```md
(columns)
- One
- Two
- Three
(/columns)
```
**output**
```html
- One
- Two
- Three
```
## 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**
```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**
```md
(center)(/center)
(gallery)(/gallery)
(card)(/card)
(toggle)(/toggle)
(modal)(/modal)
```
**output**
```html
```
## Passing Data
You can optionally pass additional data into data-attributes:
**kirbytext**
```md
(gallery size: large)(/gallery)
```
**output**
```html
```
## Nesting
Does nesting work? Yep.
**kirbytext**
```md
(outer)(inner)(/inner)(/outer)
```
**output**
```html
```
## 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