Django template language tips.

django_template_tips.md

Intro

When we work with frontend on django projects, we have to work with the django template language, some developers dislike, but i like so much and have some tips to improve this experience.

division on template with widthratio

Some times we have to use de division on template, django template language don't offer this feature, but we can "emulate" this behavior with the "widthratio" template tag, see:

<img src="{{ im.src }}" alt="{{ im.title }}" style="left: 50%; margin-left:-{% widthratio im.width 2 1 %}px;">

With this tip, we can centralize objects on css, but you can use this to another things.

webdesign contrib

Use the webdesign from contrib to generate "lorem ipsum" text in your templates, it's useful to frontend development. Another tip is combine this with fake elements explained bellow, this can help you to generate websites fake navigation.

<ul class="menu">
    {% for item in "123456789" %}
    <li class="item item-fake"><a href="#">{% lorem 1 w random %}</a></li>
    {% endfor %}
</ul>

fake elements

Daily we have to put the same element several times, and we using the "copy-paste technique". But, django template language can help us on this task.

{% for item in "123456789" %}
<li class="element-to-repeat"><a href="#">item name</a></li>
{% endfor %}

And the result is the element repeated 9 times. You can use it to generate alphabetical sequences, like:

{% for item in "ABCDEFG" %}
<span>{{ item }}</span>
{% endfor %}

separate objects with {% if %} template tag

When we have big list of items, like a list of products on a ecommerce website, we have a usual problem: differents heights can break you layout, and in most cases, you can't define a fixed height to this elements. I always fix this problem with a simple django template tip, i define how many items a need have for line and envelop elements in small lists, like that.

<section class="products">
    <h1>My Products</h1>
    <ul class="products-list">
        {% for item in "123456789" %} <!-- fake elements tip -->
        <li class="item"><a href="#">{% lorem 1 w random %}</a></li> <!-- webdesign tip -->
        {% if forloop.counter|divisibleby:4 and not forloop.last %}</ul><ul class="products-list">{% endif %} <!-- envelop objects -->
        {% endfor %}
    </ul>
</section>

This output is:

<section class="products">
    <h1>My Products</h1>
    <ul class="products-list">
        <li class="item"><a href="#">Lorem</a></li>
        <li class="item"><a href="#">Ipsum</a></li>
        <li class="item"><a href="#">Dolor</a></li>
        <li class="item"><a href="#">Sit</a></li>
    </ul>
    <ul class="products-list">
        <li class="item"><a href="#">Lorem</a></li>
        <li class="item"><a href="#">Ipsum</a></li>
        <li class="item"><a href="#">Dolor</a></li>
        <li class="item"><a href="#">Sit</a></li>
    </ul>
</section>

This is useful to use with "jquery cycle plugin".