Templating repeatable blocks in a matrix field

Question

I have a matrix field that has two different block types. The matrix field is on an entry that lists a number of benefits for a given product on a corporate website. The two different blocks are firstly an "intro" block that has a couple of text fields for a headline and description and then secondly a "benefits" to create a list of benefits. I then output the items in the template as follows:

{% for intro in entry.benefits %}
    {% for image in intro.leadImage %}
        <img class="headImage" src="{{ image.getUrl() }}" width="{{ image.getWidth() }}" height="{{ image.getHeight() }}" alt="{{ image.title }}">
    {% endfor %}
    <h3 class="sectionHead">{{ intro.introTitle }}</h3>
    <p class="intro">{{ intro.introParagraph }}</p>
{% endfor %}

<div class="details">
    {% for benefitsItem in entry.benefits %}
        <p><span class="orange">{{ benefitsItem.benefit }}</span> - {{ benefitsItem.description }}</p>
    {% endfor %}
</div>

There are two different for loops, one that lists the "intro" block and one that lists the "benefitsItem" block. The problem I have is that I want to be able to separate lists of benefits into sections by inserting another "intro" block in the CMS content but of course no matter where I order my "intro" blocks in the admin they will always appear above all the benefits where the for loop puts them out. Does anyone know how I would go about creating a matrix field or changing my template so that I can order things as follows:

Intro
Benefit
Benefit

Intro
Benefit
Benefit

Any ideas greatly appreciated. Thanks.

Answer 1

It might be worth checking the types of the matrix block like:

{% for block in entry.benefits.all() %}
    {% switch block.type %}
        {% case "intro" %} {# <=== ASSUMING BLOCK TYPE HANDLE #}
            {% for image in block.leadImage.all() %}
                <img class="headImage" src="{{ image.getUrl() }}" width="{{ image.getWidth() }}" height="{{ image.getHeight() }}" alt="{{ image.title }}">
            {% endfor %}
            <h3 class="sectionHead">{{ block.introTitle }}</h3>
            <p class="intro">{{ block.introParagraph }}</p>

        {% case "details" %} {# <=== ASSUMING BLOCK TYPE HANDLE #}
            <div class="details">
                <p><span class="orange">{{ block.benefit }}</span> - {{ block.description }}</p>
            </div>

    {% endswitch %}
{% endfor %}

If you're wanting a list inside of a matrix (matrix in a matrix for the Benefits), I'd suggest killing the Benefits block type and adding a SuperTable or Neo field to the Intro block type then you'll be able to list the benefits below each intro in a for loop.