3

Problem

I have a list of 100 golf courses and I'm looking to insert a div, containing an image for an ad after every fifth course. How would I go about doing this?

Update #1

content.html (Revised, newest version)

  • I've updated my original code snippet because off of leovp's suggested edited below. I'm having trouble showing only {% if content.featured == "Test" %} and wondering how I should closing my if-else statement.

        {% for content in COPY.courses %}
            <div class="course course--featured">
                <a href=""><img src="" class="course__image image--region"></a>

                <div class="course__inner">
                    <div class="course__wrapper">
                        {% if content.state == "MO" %}
                            <p class="course__state">Missouri</p>
                        {% elif content.state == "IL" %}
                            <p class="course__state">Missouri</p>
                        {% endif %}
                    </div>

                    <div class="course__wrapper">
                        <a href=""><p class="course__name name--region">{{ content.name }}</p></a>
                    </div>
                    <p class="course__desc">{{ content.description }}</p>
                </div>
            </div>

    {% if loop.index % 5 == 0 %}
    <div class="advertising advertising--inline">
        <div class="ad ad--rect">

            <div class="text-center hidden-xs">
                <div id="fixed-leaderboard-region-top"
                    class="dfp-ad"
                    data-dfp-custom-pos="fixed-leaderboard-top, htf"
                    data-dfp-size="[728,90]">
                </div>
            </div>

            <div class="text-center hidden-sm hidden-md hidden-lg">
                <div id="fixed-leaderboard-region-top-mobile"
                    class="dfp-ad"
                    data-dfp-custom-pos="fixed-leaderboard-top, htf"
                    data-dfp-size="[320,50]">
                </div>
            </div>
        </div>
    </div>
    {% endif %}
    {% endfor %}
</div>

content.html (Previous, old version for comparision)

  • I've looked into using batch from this Stack Overflow question that seemed similar, but I'm unsure if this solves my problem?

    {% for content in COPY.courses %} {% if content.featured == "Test" %}

    <div class="course__inner">
    <div class="course__wrapper">
        {% if content.state == "MO"%}
        <p class="course__state">Missouri</p>
        {% elif content.state == "IL" %}
        <p class="course__state">Illinois</p>
        {% endif %}
    </div>

    <div class="course__wrapper">
        <a href=""><p class="course__name name--home">{{ content.name }}</p></a>
    </div>
    <p class="course__desc">{{ content.description }}</p>
</div>

    {% endif %} {% endfor %}

Community
  • 1
  • 1
Andrew Nguyen
  • 1,416
  • 4
  • 21
  • 43

1 Answers1

3

While iterating, you can get the current index and check if it's divisible by 5:

{% set count = 0 %}
{% for content in COPY.courses %}
{% if content.featured == "Test" %}
<div class="course course--featured">
    <a href=""><img src="" class="course__image image--home"></a>
    [...]
    </div>
</div>

{% set count = count + 1 %}
{% if count % 5 == 0 %}
    <!-- additional content once every 5 courses -->
{% endif %}
{% endif %}
{% endfor %}

NOTE: This approach no longer works after version 2.10.

For detail see: How to increment a variable on a for loop in jinja template?

Colin
  • 4,025
  • 21
  • 40
leovp
  • 4,528
  • 1
  • 20
  • 24
  • Your answer is extremely close. With your solution, I was not able to get the ad to show up unless I close the first if statement `{% if content.featured == "Test" %}` before the `{% if loop.index0 % 5 == 0 %}`. But now, I see all 100-ish courses, when I want to limit it to those that have `Test` – Andrew Nguyen Mar 17 '17 at 21:47
  • I've updated the original answer to showcase these changes. – Andrew Nguyen Mar 17 '17 at 21:47
  • Ah. You need to check the index after some filtering condition. I'll update the answer. – leovp Mar 17 '17 at 21:51
  • 1
    Awesome. Yes that works. I was hoping you could explain some of your logic / reasoning here with the use of `{% set count = 1 %}` and `{% set count = count + 1 %}` – Andrew Nguyen Mar 17 '17 at 22:02
  • 1
    `set count = 0` creates a variable `count` and sets it to 0. Later, after the if statement allows us to continue, we increment `count` and check if it's divisible by 5. If it is, then we are right after the fifth / tenth / ... div. – leovp Mar 17 '17 at 22:29