For loop in Django template while changing the HTML each iteration - django

Question

So I have this piece of HTML:
<div class="core-features-single">
<div class="row">
<div class="col-sm-6">
<div class="core-feature-img">
<img src="assets/images/watch-4.png" class="img-responsive" alt="Image">
</div>
</div>
<div class="col-sm-6">
<div class="core-feature-content arrow-left">
<i class="icofont icofont-brand-android-robot"></i>
<h4>Android and iOS Apps Install</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat.</p>
</div>
</div>
</div>
</div>
<div class="core-features-single">
<div class="row">
<div class="col-sm-6">
<div class="core-feature-content arrow-right">
<i class="icofont icofont-ui-text-chat"></i>
<h4>Live Chat With Friends</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat.</p>
</div>
</div>
<div class="col-sm-6">
<div class="core-feature-img">
<img src="assets/images/watch-5.png" class="img-responsive" alt="Image">
</div>
</div>
</div>
</div>
Which generates this kind output in the webpage:
But how do I iterate an HTML element like this? Because the text and image block order are changing each iteration.
What I came up with:
{% for entry in page.product_features_showcase.all %}
{% image entry.image height-1000 as img %}
<div class="core-features-single">
<div class="row">
<div class="col-sm-6">
<div class="core-feature-content arrow-{% cycle 'left' 'right' 'left' 'right' 'left' 'right' 'left' 'right' %}">
<i class="icofont icofont-phone"></i>
<h4>{{ page.product_features_showcase_title }}</h4>
<p>{{ page.product_features_showcase_description }}</p>
</div>
</div>
<div class="col-sm-6">
<div class="core-feature-img">
<img src="{{ img.url }}" class="img-responsive" alt="Image">
</div>
</div>
</div>
</div>
{% endfor %}
I know I can use cycle to make different CSS classes each iteration. But how to change the order of the HTML element? To make this HTML work in a loop.

Answer 1

Use forloop.counter and divisibleby inside a for loop to render different HTML blocks in odd and even loops:
{% if forloop.counter|divisibleby:2 %}
Right-arrow block
{% else %}
Left-arrow block
{% endif %}
In Django docs: https://docs.djangoproject.com/en/2.2/ref/templates/builtins/#divisibleby