Search code examples
twiggrav

Generating boostrap rows in twig

I have a grav-content like this:

### Some title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a mauris purus.

??START??
##### [fa=certificate/]  Certificate
##### [fa=line-chart/]  Process
##### [fa=newspaper-o/]  News
??END??

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a mauris purus.

My goal to generate bootstrap rows between ??BEGIN?? and ??END?? dynamically

For example like this:

<div class="container">
  <div class="row">
    <div class="col-md-4">
      Certificate
    </div>
    <div class="col-md-4">
      Process
    </div>
    <div class="col-md-4">
      News
    </div>
  </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a mauris purus.

How can it in my TWIG template?

Solution

  • This isn't something you can do with a single template file. Depending on how you want to build this, you may even need to use a plugin, or ad custom code to your theme.

    Modular Components

    What you've described is generally done using a modular component. What you're doing looks similar to the starter theme, Antimatter, calls _features.

    _features example

    To do this, you'd use a modular page type, and include one module for your bootstrap row/column setup, and then another for the general text.

    The file structure looks like this:

    file structure description

    Plugin

    If you wanted to do this as a plugin, that's certainly an option and would prevent you from having to use modular pages. That being said, there's no support for such an output without doing it yourself. Your plugin will need to analyize the raw page, and then convert it to bootstrap's grid on its own.

    If this is the direction you want to go down, I'd suggest taking a look at the markdown notices plugin. It should give you a good idea of where to go from here.