CODEWITHSUNDEEP
djangopython-3.xtemplates
Andrej Vilenskij
Andrej Vilenskij

Reputation: 517

set a variable in django template file, and update it after iteration

Trying to set variable in django template, and make a simple rule to update it after iteration. Here is my template:

{% for adv in advs %}
<div class="media-item big" style="top: 18%;left:{% cycle '304' '1078' %}px;">
    <div class="media-item__tags">
         <a href="#" class="tag">{{ adv.year }}</a>
         <a href="#" class="tag">{{ adv.payer}}</a>
    </div>
    <div class="media-item__content">
        <div class="media-item__background">
            <a href="project-spar.html" class="media-item-background__link"></a>
            <div class="media-item__canvas">
                <div class="media-item__canvas-background" style="background-image: url({{adv.image.url}})"></div>
            </div>
            <h2 class="topic white upcase fixed-size">{{ adv.name }}</h2>
            <a href="#" class="link regular width600-only">Смотреть проект</a>
        </div>
    </div>
</div>

In first div i need to make different 'left:' value. I want to make rule: after every iteration, value changes from base=304 to base+774 px. I tryed to do it somehow with {% cycle %} but it doesnt work for me, also tryed to set variables with {% with %} tag, but didnt find any information about how to update them.

Upvotes: 0

Views: 1203

Answers (1)

Sachin
Sachin

Reputation: 3664

You can set the style by multiplying the current counter from 0...n with 774 and add base value 304. For this, you'll need a custom template tag.

Create a templatetags directory in your app. Add an empty __init__.py and multiply_add.py.

multiply_add.py

from django import template
register = template.Library()

@register.simple_tag
def mul_add(a, b, base_value):
    return (a * b) + base_value

template.html

{% load multiply_add %}

{% for adv in advs %}
<div class="media-item big" style="top: 18%;left:{% multiply_add forloop.counter0 774 304 %}px;">
    <div class="media-item__tags">
         <a href="#" class="tag">{{ adv.year }}</a>
         <a href="#" class="tag">{{ adv.payer}}</a>
    </div>
    <div class="media-item__content">
        <div class="media-item__background">
            <a href="project-spar.html" class="media-item-background__link"></a>
            <div class="media-item__canvas">
                <div class="media-item__canvas-background" style="background-image: url({{adv.image.url}})"></div>
            </div>
            <h2 class="topic white upcase fixed-size">{{ adv.name }}</h2>
            <a href="#" class="link regular width600-only">Смотреть проект</a>
        </div>
    </div>
</div>

Upvotes: 2

Related Questions