Modular page with sub-modular content

Started by Muut Archive 10 years ago · 2 replies · 983 views

10 years ago

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:

TXT

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:

YAML

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

slide.md:

YAML

title: Slide 1
routable: false
visible: false

# Slider Title
## Slider Sub-Title

lightslider.html.twig:

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.

10 years ago

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:

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">
                        {% 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:

TWIG

{% 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

10 years ago

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

Topic	Replies	Views	Activity
About the Archive category Archive · by Deleted User, 9 years ago	0	1365	9 years ago
Hey buddies! Archive · by Muut Archive, 9 years ago	2	940	9 years ago
There is a way to do a "if condition" in MD page? Archive · by Muut Archive, 9 years ago	2	4069	9 years ago
Official docker image of grav (+admin +gitsync) Archive · by Muut Archive, 9 years ago	1	2960	9 years ago
Weird Grav + caddy + iOS + https problem Archive · by Muut Archive, 9 years ago	3	1124	9 years ago

Suggested topics