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

The Gravstrap Thumbnails component handles the Bootstrap thumbnails component.

The thumbnails component is defined by the following Yaml code:

gravstrap:
    thumbnails:
        thumbnails1:
            #from_file: thumbnails.markdown
            items:
                0:
                    url: "#"
                    class: col-xs-6 col-md-3
                    image: image1.jpg
                    #section: thumbnail1
                1:
                    url: "#"
                    class: col-xs-6 col-md-3
                    image: image2.jpg
                    #section: thumbnail2
                2:
                    #url: "#"
                    class: col-xs-6 col-md-3
                    image: image3.jpg
                    #section: thumbnail3

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

from_file property [optional]

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

[SECTION thumbnail1]

### Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

[Button1](http://diblas.net){.btn .btn-primary}
[Button2](http://diblas.net){.btn .btn-default}

[/SECTION]

[SECTION thumbnail2]

### Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

[Button1](http://diblas.net){.btn .btn-primary}
[Button2](http://diblas.net){.btn .btn-default}

[/SECTION]

[SECTION thumbnail3]

### Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

[Button1](http://diblas.net){.btn .btn-primary}
[Button2](http://diblas.net){.btn .btn-default}

[/SECTION]

If you need to add more thumbnails and you want to define for each thumbnail a markdown content, you must add a markdown file for all the thumbnails you want to handle.

items property

The items property is an array which defines the elements displayed in the thumbnails component.

url: "#" class: col-xs-6 col-md-3 image: image1.jpg

section: thumbnail1

item's url property [optional]

The url optional property defines the url connected with the item. When you define both url and section properties, the latter is ignored.

item's class property

The class property defines the thumbnail width, using Bootstrap col-* properties.

item's image property [optional]

The image property defines the thumbnail image.

item's section property [optional]

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

Render the thumbnails component

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

{{ gravstrap.thumbnails1 }}

Next Post Previous Post