Twig – Bootstrap – Utrzymanie kolumn

bootstrap-z-twigiem

Ostatnimi czasy wpadłem na bardzo fajne rozwiązanie problemu utrzymania bootstrapowych kolumn i podziału na wiersze działając w Twigu na loop-ach. By dokładnie wyjaśnić problem przeanalizujmy poniższy kod, który jest wzorcem jaki efekt chciałbym uzyskać:

<div class="row">
   <div class="col-md-6"></div>
   <div class="col-md-6"></div>
</div>

<div class="row">
   <div class="col-md-6"></div>
   <div class="col-md-6"></div>
</div>

<div class="row">
   <div class="col-md-6"></div>
   <div class="col-md-6"></div>
</div>

Mamy tutaj przykład wygenerowania grid-a 3 wierszy po 2 kolumny.
W Twigu taki efekt można było uzyskać niezbyt eleganckim kodem:

{% for article in articles %}
    {% if loop.index % 2 == 1 %}
        <div class="row">
    {% endif %}
    <div class="col-md-6">
        // your content
    </div>
    {% if (loop.index % 2 == 0 or loop.last) %}
        </div>
    {% endif %}
{% endfor %}

Co prawda efekt działania skryptu będzie nas po części zadowalał, jednak użycie działań modulo i instrukcji warunkowych nie ułatwia późniejszego debugowania kodu.
Z pomocą przychodzi funkcja batch. Dzięki jej zastosowaniu znacznie upraszczamy kod pisząc coś takiego:

{% for row in articles|batch(2) %}
    <div class="row">
        {% for article in row %}
            <div class="col-md-6">
                // your content
            </div>
        {% endfor %}
    </div>
{% endfor %}

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *