Single page in multiple columns

Hi,
as described in learn.getgrav.org I can use a delimiter such as

</hr>

Are there other delimiters I can use in a single page? Which one?
For example: The first area should use 3 columns, the second 2 columns.
So for the first one I could use the </hr>delimiter.
And for the 2 column area I could use the other delimiter.

I assume you are referring to the cookbook recipe?

You can really use any delimiter although the ---/<hr /> one is ideal because it is syntactically accurate (ie, that's the entire purpose of the hr tag in the first place!)

You would just have to find something that works for your content.

BTW, if you are getting into more complex layouts you might want to consider breaking up your page with modular pages.

Yes, I'm referring to the cookbook recipe. Works Great. Thank You.
So as a delimiter I could use /** for example?

I has to be something that either markdown doesn't mess with, or something it does process, but you can grab on to. For example you could use --\-- and then update the twig so it uses split('--\--') as Markdown is not going to convert the --\--

Just do some trial and error to find something that works well for you. There's really no right or wrong answer.

Just tested with your /** and that works too :)

Ok gonna try this, too.
As a Joomla/Gantry User I know how to get there. And even now with Gantry 5 it's very easy to build complex pages.
But it's fascinating to mess around with Grav...
And as far as I know gantry 5 is intended to be used in Grav too...

Yup, the plan is to have Gantry5 for Grav in time, will be pretty interesting!

I tried to use another delimiter(/**) in my twig file but I get the message:
The block 'content' has already been defined line 6 in "modular/test.html.twig" at line 13
my twig:

<section id="test">
  <div class="container">
<div class="row">
<div class="col-lg-12 text-center"><h2>Infos</h2></div>    
  <div class="col-lg-12 text-left">  
            {% block content %}    
            {% for column in page.content|split('<hr />') %}
            <div class="col-md-4">{{ column }}</div>
            {% endfor %}        
            {% endblock %}    
    </div>
    <div class="col-lg-12 text-left">  
            {% block content %}    
            {% for column in page.content|split('/**') %}
            <div class="col-md-4">{{ column }}</div>
            {% endfor %}        
            {% endblock %}  
    </div></div>     
</section>

Can I only use/define one block content in a twig file.

Hi @arank,

the special Twig command block defines something like a "scope" for a part of your twig file. Usually it is used to make it overridable by a child template (see http://twig.sensiolabs.org/doc/tags/extends.html#how-do-blocks-work) and therefore block names have to be unique. In your code you are trying to define two times the same block name "content".

I guess in your case you better write

<section id="test">
  <div class="container">
<div class="row">
<div class="col-lg-12 text-center"><h2>Infos</h2></div>
{% block content %}    
<div class="col-lg-12 text-left">  
  {% for column in page.content|split('<hr />') %}
    <div class="col-md-4">{{ column }}</div>
  {% endfor %} 
  </div>
  <div class="col-lg-12 text-left">  
  {% for column in page.content|split('/**') %}
    <div class="col-md-4">{{ column }}</div> 
   {% endfor %}        
</div>
{% endblock %}  
</div>    
</section>

to make it work.

Hi, thanks for the tip. Error message is gone.
The only problem is: The content separated from the first delimiter is displayed again in the second col-lg-12 text-left and the content from the second delimiter is displayed again in the first col-lg-text-left. ???

The thing is, you're telling it to divide the whole page first in pieces divided by <hr />, then another time the same page is divided in pieces by /**.

It cannot simply know where to end the first section, and where to start the second.

If I were you, I'd simply create the columns using CSS

@flaviocopes AFAIK, creating columns via CSS is really handy, unfortunately not well supported, especially when wants to support older browsers, though...

@arank Yes, this is what you see with the above code. An updated version, which doesn't have such a caveat you can find below.

<section id="test">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center"><h2>Infos</h2></div>
      {% block content %}
        {% set columns = preg_split('~(?:<hr\\s*/>|/\\*\\*)~i', page.content) %}
        {% for column in columns %}
          <div class="col-md-4">{{ column|trim }}</div>
        {% endfor %}     
      {% endblock %}  
    </div>    
</section>

Hi Sommerregen,
thank you. Your Code works, no doubled content anymore.
Only thing:
I want to use different column layouts for each delimiter.
For the first delimiter (---)a col-md-4, for the second delimiter (/**) a col-md-6 layout.

This is doable and there exists several approaches. The easiest and probably most convenient approach is to alternate the column layouts using the cycle function independent of your delimiter:

<section id="test">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center"><h2>Infos</h2></div>
      {% block content %}
        {% set columns = preg_split('~(?:<hr\\s*/>|/\\*\\*)~i', page.content) %}
        {% for column in columns %}
          <div class="{{ cycle(["col-md-4", "col-md-6"], loop.index0) }}">{{ column|trim }}</div>
        {% endfor %}     
      {% endblock %}  
    </div>    
</section>

Thus, you can freely decide, mix and replace your delimiters "---" and "/**" in your document. This is not exactly what you want, but you can see it as a starting point for your own modifications. At last, the best way to learn Twig is to study the Twig documentation extensively and try it on your own ;-)

Hi,
thank you very much. This approach is very flexible. For each part of content in a delimiter I can/ have to define a layout. Otherwise content/layout is cycled/repeated.
But I see, I have to study more...Twig/Grav

Wow you learn something new every day! I didn't know about the cycle twig function. Thanks!