Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Modular template with div wrappers around some modules

Started by Muut Archive 11 years ago · 6 replies · 362 views

11 years ago

This is my first post, so bear with me... I'm writing my custom theme based on the modular one-page skeleton. I now have a modular twig template with the basic for loop (from the skeleton) to print out all 3 modules underneath each other. But what I would love to have is an extra wrapper div around the last 2 ones. I've included an example screenshot. Here is my current code, but it's wrapper the other wrapper div around all sections...

Thanks in advance!

TWIG

{% if module.content.isFirst() %}

    {% for module in page.collection() %}
      <section class="{{ module.title }}">
        {{ module.content }}
      </section>
    {% endfor %}

  {% else %}

    <div class="other-wrapper">
      {% for module in page.collection() %}
        <section class="{{ module.title }}">
          {{ module.content }}
        </section>
      {% endfor %}
    </div> 

  {% endif %}

Example

11 years ago

Does this not work as expected? It looks like it should do what you want right?

11 years ago

No it doesn't. It also wraps the intro section into the other wrapper. I just noticed that the if statement sits outside the for loop. I'll let you know tomorrow.

Happy holidays!

11 years ago

Oh yah, just move the for statement outside of everything, so the if statements are inside it.

11 years ago

Yep, that's what I thought but it also wraps the div around the first section (with the intro class). Code + screenshot how it looks right now...

TWIG

{% for module in page.collection() %}

    {% if module.content.isFirst() %}

    <section class="{{ module.title }}">
      {{ module.content }}
    </section>

    {% else %}

    <div class="other-wrapper">
      <section class="{{ module.title }}">
        {{ module.content }}
      </section>
    </div>

    {% endif %}

  {% endfor %}

Screenshot

11 years ago

try this:

TWIG

{% for module in page.collection() %}

    {% if loop.first %}

    <section class="{{ module.title }}">
      {{ module.content }}
    </section>

    {% else %}

    <div class="other-wrapper">
      <section class="{{ module.title }}">
        {{ module.content }}
      </section>
    </div>

    {% endif %} 

  {% endfor %}

11 years ago

Indeed that did it! Thank you very much for the help!

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

Suggested topics