Modular page with sub-modular content

Archive
1

Sorry for the weird description. Don’t know how else to put it…

My homepage is a modular page. Works!
First block is a slider (lightslider) which has subpages, one for each slide:

pages/01.home/
pages/01.home/_slider/lightslider.md
pages/01.home/_slider/01.slide1/slide.md
pages/01.home/_slider/01.slide2/slide.md

lightslider.md:

title: Slider Content
routable: false
visible: false
content:
    items: @self.children

slide.md:

title: Slide 1
routable: false
visible: false
 
# Slider Title
## Slider Sub-Title

lightslider.html.twig:

{% if page.collection()|length > 1 %}
<section class="slider-home">
    <div class="row">
        <div class="small-12 column">
            <ul id="slider" class="slider">
                {% for slide in page.collection() %}
                    <li class="lslide">
                        {{ slide.content }}
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</section>
{% endif %}

This does work but there is one issue I don’t get. I created a corresponding slide.html.twig but that is completely ignored. No matter where I put that file (templates or templates/modular, it’s html content is not being used. Grav also doesn’t complain when that file is completely absent.

I would like to have a twig for each slide for fine grained control over the html structure.

2

The twig template file is ignored because you are not really rendering the page, you are simply getting the content from the page with slide.content and rendering that in your lightslider.html.twig file.

What you would need to do is change that to:

{% if page.collection()|length > 1 %}
<section class="slider-home">
    <div class="row">
        <div class="small-12 column">
            <ul id="slider" class="slider">
                {% for slide in page.collection() %}
                    <li class="lslide">
                        {% include slide.template~'.html.twig' with {'content':slide.content} %}
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</section>
{% endif %}

This way you are rendering the template as defined by the slide’s page and passing it the slides content to use.

If you want to put these under say templates/slides/ in your theme, then you would need to adjust the include path to be:

{% include 'slides/'~slide.template~'.html.twig' with {'content':slide.content} %}

NOTE: the ~ is the Twig string-concatenation symbol: https://coderwall.com/p/lxiohg/how-to-concatenate-strings-in-twig

3

Thank you very much for clarifying. You helped me a lot!