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 }}