The Gravstrap Page header shortcode handles the Bootstrap Page header component. Here is a live example:

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

[g-pageheader title="Title" subtitle="Subtitle"][/g-pageheader]

Shortcode parameters

The [bootstrap-collapse] shortcode has some optional parameters:

  • name - defines an unique component name.
  • title - defines the page header title
  • subtitle - defines the page header subtitle
  • 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 page header component using the template

The page header 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:

$pageHeader = array(
    'name' => 'pageheader1',
    'title' => 'Title',
    'subtitle' => 'Subtitle',            
    'attributes' => 'class:my-class,rel:my-rel',
$this->grav['twig']->twig_vars['page_header'] = $pageHeader;

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

{% include 'bootstrap/pageheader.html.twig' with page_header %}

Next Post Previous Post