1

I am trying to enable the user to have mutliple full width css background images, my loop works going through the matrix and grabbing the images but the trouble is they all have the same css class mid-banner and one overrides the other so they all end up being the same image, how can I make it so that each one has a different class as it loops through, or each have an individual id would probably make more sense.

Thanks in advance for any help

{% for block in entry.homeMatrix %}
    {% if block.type == "homeMatrix" %}
    {% set oddOrEven = cycle(['even', 'odd'], loop.index0) %}
        <section class="section {{ oddOrEven }}">
            <article class="box">
                <h1>{{ block.txtTitle }}</h1>
                {{ block.txt }}
            </article>
        </section>  
        {% for image in block.image %}
        <style type="text/css">
            .mid-banner{
                background-repeat:no-repeat;
                background-size:contain;
                background-position:center;
                background-size:cover;
                background-image: url({{ image.getUrl() }});
            }
        </style>
        {% endfor %}
        <section class="section mid-banner">
            <article class="box">
                <h1>{{ block.imageTitle }}</h1>
            </article>
        </section>            
    {% endif %}
{% endfor %}
1

So I have figured out the answer to my own questions it turns out that I needed to use a {{ counter }} that incremented the class name in both the tag where the .mid-banner class is defined so that each time the loop runs it add 1 to the class. The stars show the code i have added:

{% for block in entry.homeMatrix %}
    {% if block.type == "homeMatrix" %}
    {% set oddOrEven = cycle(['even', 'odd'], loop.index0) %}
        <section class="section {{ oddOrEven }}">
            <article class="box">
                <h1>{{ block.txtTitle }}</h1>
                {{ block.txt }}
            </article>
        </section>  

        **{% set counter = ( counter | default(0) ) + 1 %}**
        {% for image in block.image %}
        <style type="text/css">
            .mid-banner**{{ counter }}**{
                background-image: url({{ image.getUrl() }});
            }
        </style>
        {% endfor %}
        <section class="section mid-banner**{{ counter }}**">
            <article class="box">
                <h1>{{ block.imageTitle }}</h1>
            </article>
        </section>            
    {% endif %}
{% endfor %}
0

The same outcome could be achieved without the need to us a counter that adds a class/id at all if you use an inline style....

{% for block in entry.homeMatrix %}
{% if block.type == "homeMatrix" %}
{% set oddOrEven = cycle(['even', 'odd'], loop.index0) %}
    <section class="section {{ oddOrEven }}">
        <article class="box">
            <h1>{{ block.txtTitle }}</h1>
            {{ block.txt }}
        </article>
    </section>  

    {% for image in block.image %}
    <section class="section" style="background-image: url({{ image.getUrl() }});">
        <article class="box">
            <h1>{{ block.imageTitle }}</h1>
        </article>
    </section> 
    {% endfor %}           
{% endif %}
{% endfor %}

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.