This documentation refers to a Gravstrap obsolete release. Please consider to upgrade to the new release

The Gravstrap Jumboron component handles the Bootstrap Jumboron component. Despite the original Bootstrap component, this element can handle a background image.

The jumboron component is defined by the following Yaml code:

gravstrap:
    jumbotron:
        jumbotron1:
            fullwidth: true
            image: 
                name: image.jpg
                brightness: -30
                contrast: -5
                # Add 0 as value for properties that does not require an argument
                grayscale: 0 
                colorize: 
                    0: 0
                    1: 123
                    2: -223
                # Add all the media methods you need
            from_file: jumbotron.markdown
            section: content

This code must be added to the page where you need to display the component.

from_file property

The from_file mandatory property defines the file which contains the contents for each jumboron element. This file must be added under the page where the component is displayed and it is structured as follows:

[SECTION content]

# Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

[Learn More](http://e.aa){.btn .btn-primary .btn-lg}

[/SECTION]

Each section name is related to the item who displays the content of the section itself.

section property

The section property defines the item section name where it is defined the jumbotron content.

fullwidth property [optional]

The fullwidth optional property sets the jumbotron to full screen. According to Bootstrap documentation, you must place the jumbotron outside all .containers elements.

image property

The image property defines an optional background image, which must live under the page where the jumbotron is rendered. In addition, you can apply to this image all the Grav filters. When a filter does not require a value, just add a zero value.

image's name property

The name of the image to render.

Render the jumboron component

Add the following code to the template where you need to render the jumboron component:

{{ gravstrap.jumboron1 }}

Next Post Previous Post