2

I have a complex html/css structure per 'row' that I would like to use Matrix to populate. Design markup as follows:

<!--- feature left -->
<section class="features-inner dark-bg-container">
    <div class="row collapse small-uncollapse" >
        <div class="medium-5 small-12 columns end dark-bg" >
            <h3>Title</h3>
            <p>Lorem Ipsum...</p>
        </div>
        <div class="medium-5 medium-push-2 small-12 columns end dark-bg-icon" >
            <img src="img/image.svg" class="feature-image"/>
        </div>
    </div>
</section>
<!--- end of feature left -->

<!--- feature right -->
<section class="features-inner gold-bg-container">
    <div class="row collapse small-uncollapse" >
        <div class="medium-5 medium-push-7 small-12 columns gold-bg" >
            <h3>Title</h3>
            <p>Lorem Ipsum...</p>
        </div>
        <div class="medium-5 medium-pull-5 small-12 columns end gold-bg-icon">
            <img src="img/image.svg" class="feature-image"/>
        </div>  
    </div>
</section>
<!--- end of feature right -->

How would I get Matrix to change the markup per 'row'? I looked at switch but that seems to be for types of block content/types.

TIA.

3

When looping through Matrix rows, you can use {{ loop.index }} or {{ loop.index0 }} to see which row you're at.

With loop.index, you could create html for each row number, or (for instance) create different html for even/uneven:

{% for row in entry.matrixFieldHandle %}
    {% if loop.index is divisible by(2) %}
        <p class="even">{{ row.text }}</p>
    {% else %}
        <p class="uneven">{{ row.text }}</p>
    {% endif %}
{% endfor %}
  • Twig has tests for even and odd, so {% if loop.index is even %} will work too. – Marion Newlevant Aug 3 '15 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.