The Gravstrap Jumbotron shortcode handles the Bootstrap Jumbotron component. Despite the original Bootstrap component, this element can handle a background image. Here is a live example:

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

[g-jumbotron name="jumbotron1" image="image1.jpg"]
# Gravstrap theme

Gravstrap Theme helps you to start a new Grav CMS site with Bootstrap support and several ready to use modules. It is also perfect to start a new Bootstrap custom theme, to create your unique design.

[/g-jumbotron]

Shortcode parameters

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

  • name - defines an unique component name.
  • image - defines the image name used as jumbotron image.
  • fullwidth - displays the jumbotron at full screen when set to true. Valid values are true|false. By default this value is set to false.
  • 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 jumbotron component using the template

The jumbotron 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:

$jumbotron = array(
    'name' => 'jumbotron1',
    'image' => '04.plugins/plugin-160204-gravstrap/jumbotron-160205/image1.jpg',
    'fullwidth' => true,            
    '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['jumbotron'] = $jumbotron;

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

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

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

Next Post Previous Post