Modular template with div wrappers around some modules

Archive
1

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!

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

2

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

3

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!

4

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

5

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…

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

6

try this:

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

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