The Gravstrap Thumbnails shortcode handles the Bootstrap thumbnails component.Here is a live example:

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

[g-thumbnail name="thumbnail1"]
[g-thumbnail-item image="image1.jpg" url="http://diblas.net"][/g-thumbnail-item]
[g-thumbnail-item image="image2.jpg" url="http://diblas.net"][/g-thumbnail-item]
[g-thumbnail-item image="image3.jpg" url="http://diblas.net"][/g-thumbnail-item]
[/g-thumbnail]

You can also add a content to your thumbnail item and the thumbnails will be redered as shown below:

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Take this action

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Take this action

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Take this action

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

[g-thumbnail id="thumbnail2"  name="thumbnail1" images_path="04.plugins/plugin-160204-gravstrap/thumbnails-160206"]
[g-thumbnail-item image="image1.jpg"]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
[Take this action](#) {.btn .btn-primary}
[/g-thumbnail-item]

[g-thumbnail-item image="image2.jpg"]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
[Take this action](#) {.btn .btn-danger}
[/g-thumbnail-item]

[g-thumbnail-item image="image3.jpg"]
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
[Take this action](#) {.btn .btn-success}
[/g-thumbnail-item]

[/g-thumbnail]

Shortcode parameters

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

  • name - defines an unique component name.
  • images_path - defines the path where images are saved. Learn more about the images_path parameter.

The [bootstrap-thumbnail-item] shortcode, which defines each thumbnail item, has the following parameters:

  • image - defines the image name
  • url - defines the link url. When this parameter is set, the thumbnail content is not displayed.

Render the thumbnail component using the template

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

$thumbnail = array(
    'name' => 'thumbnail1',  
    'images_path' => '04.plugins/plugin-160204-gravstrap/thumbnails-160206',         
    'items' => array(
        array(
            'image' => 'image1.jpg',
            'url' => 'http://diblas.net',
            //'content' => 'Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.',
        ),
        array(
            'image' => 'image2.jpg',
            'url' => 'http://diblas.net',
            //'content' => 'Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.',
        ),
        array(
            'image' => 'image3.jpg',
            'url' => 'http://diblas.net',
            //'content' => 'Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.',
        ),
    ),
);

$this->grav['twig']->twig_vars['thumbnail'] = $thumbnail;

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

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

Please note that when you provide an url, the content is not rendered. When you provide a content it is raw: it's up to you to provide a formatted one.

Next Post Previous Post