This is a picture of me.

Simon Buckley

SMNBKLY.CO


Creating a Custom Kirbytag for Alert Boxes

21 May 2019

WARNING!Continue reading if you’re interested in learning how to use Kirby CMS like a pro. This post is technical in nature, and assumes a minimum understanding of how Kirby 3 works.

I’m a huge fan of Kirby. Not the pink (squishy?) Nintendo character, the CMS. If you’ve not used it before, and you’re keen to try a friendly, flexible, fast, and secure alternative to Wordpress, I can’t recommend it highly enough.

One of the advantages of Kirby is its simple, yet powerful plugin system. If you’ve read my post about storing credentials in PowerShell scripts, you might’ve noticed a warning box like the one above.

Below, I’ll endeavour to walk you through the creation of a simple plugin to create an alert box just like the one above.

CAUTION!This tutorial may also contain instructions for a yellow alert box too.

Step 1 - The PHP

To create the plugin, start by creating a folder in Kirby’s plugins directory. You can call it anything you want. For example:

site/plugins/alert-box

Inside this new folder, create an index.php file containing the below plugin code:

<?php
Kirby::plugin('alert-boxes', [
    'tags' => [
        'warning' => [
            'attr' => [
                'title'
            ],
            'html' => function($tag) {
                if($tag->title != '') {
                    return '<div class="warning notice-box"><strong class="notice-box-title"><i class="fas fa-exclamation-triangle"></i> ' . $tag->title . '</strong>' . kirbytextinline($tag->value) . '</div>';
                } else {
                    return '<div class="warning notice-box">' . kirbytextinline($tag->value) . '</div>';
                }
            }
        ],
        'caution' => [
            'attr' => [
               'title'
            ],
            'html' => function($tag) {
                if($tag->title != '') {
                    return '<div class="caution notice-box"><strong class="notice-box-title"><i class="fas fa-exclamation-circle"></i> ' . $tag->title . '</strong>' . kirbytextinline($tag->value) . '</div>';
                } else {
                    return '<div class="caution notice-box">' . kirbytextinline($tag->value) . '</div>';
                }
            }
        ]
    ]
]);
?>

What exactly is going on here?

The code above defines two new Kirbytags. Kirbytags allow you to extend your markup by adding content like images, links, dates, or videos. In the code above, we’re defining ‘Warning’ and ‘Caution’, and telling Kirby how we expect the tags to be parsed.

To understand practically how it works, consider the sample markdown:
(warning: Warning content title: Warning title)

The HTML output of the kirbytag above will look like:

</section><div class="warning notice-box"><div class="content centered"><strong class="notice-box-title"><i class="fas fa-exclamation-triangle"></i> Warning title</strong>Warning content</div></div><section class="content centered blog-text">

Once styled with some CSS, this looks like:

Warning titleWarning content

Step 2 - The Styles

To begin styling, let’s define our CSS animation.

@keyframes vibrate {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-1px, 1px);
    }
    40% {
        transform: translate(-1px, -1px);
    }
    60% {
        transform: translate(1px, 1px);
    }
    80% {
        transform: translate(1px, -1px);
    }
    100% {
        transform: translate(0);
    }
}

Using SASS, we can then style our HTML by selecting the notice-box class.

.notice-box {
    padding: 1rem;
    margin-top: 1rem;
    color: #000;
    &.warning {
        background: #c43636;
    }
    &.caution {
        background: #f2d500;
    }
    .notice-box-title {
        display: block;
        margin-bottom: 0.4rem;
        svg {
            width: 24px;
            height: 24px;
            margin-bottom: -4px;
            margin-right: 6px;
            animation: vibrate 0.3s linear infinite both; 
        }
    }
}

And to provide a more accessible experience, we can use the prefers-reduced-motion CSS media query to better suit the warning to users that prefer less motion:

@media (prefers-reduced-motion: reduce) {
    .notice-box .notice-box-title svg {
        animation: none;
    }
}

Step 3 - Wrapping up

To finish, make sure to install Font Awesome on your web page. Font Awesome provides the icons you can see above.

Kirby Web Development PHP SASS

This post was last updated on 8 October 2019