The Gravstrap Alert shortcode handles the Bootstrap alert component. Here is a live example:

The alert shortcode, shown above, is defined by the following definition:

[g-alert name=alert1 type=warning]
# Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

[Take this action](#) {.btn .btn-danger}
[Or do this](#) {.btn .btn-default}
[/g-alert]

Shortcode parameters

The [g-alert] shortcode has some optional parameters:

  • name - defines an unique component name.
  • type - defines the alert type. Valid values are success|info|warning|danger
  • attributes - defines extra attributes you can add to your shortcode. Attributes is a string of HTML key:value tokens, separated by commas. A valid attributes value is attributes=class:myclass, rel:my-rel".

Render the alert component using the template

The alert component can also be dynamically filled with data provided by a json file or fetched from a database. You will provide an array similar to the following one:

$alert = array(
    'name' => 'alert1',  
    'type' => 'warning',            
    'attributes' => 'class:my-class,rel:my-rel',
    'content' => 'Anim pariatur cliche reprehenderit enim eiusmod high life accusamus terry richardson ad squid.',
);
$this->grav['twig']->twig_vars['alert'] = $alert;

then in your template you will render the accordion as follows:

{% include 'bootstrap/alert.html.twig' with alert %}

Please note that the provide content is raw: it's up to you to provide a formatted one.

Next Post Previous Post