Twig adalah salah satu template engine PHP yang sering digunakan, framework terkenal seperti Symfony dan Drupal 8 menggunakan twig sebagai template engine bawaan, Drupal 8 menggunakan twig karena basenya menggunakan Symfony.

Dalam membangun web kadang-kadang kita membutuhkan beberapa attribut khusus, contohnya, untuk membuat sebuah carousel menggunakan bootstrap, dibutuhkan sebuah looping dari twig template agar image-image carousel dapat ditampilkan semua, contoh code :

{% for item in items %}
<div class=”carousel-item” style=”background-image: url( {{ item.content }})“>
</div>
{% endfor %}

codingan diatas akan menghasilkan tampilan kira-kira seperti ini :

<div class=“carousel-item“ style=“background-image:
url( ‘http://image/image1.jpg’)“></div>
<div class=“carousel-item“ style=“background-image:
url( ‘http://image/image2.jpg’)“></div>
<div class=“carousel-item“ style=“background-image:
url( ‘http://image/image3.jpg’)“></div>

permasalahannya kadang-kadang kita harus memberikan class khusus pada index yang pertama, untuk itu pada looping tersebut harus ditambahkan pengkondisian if, agar pada index pertama pada looping diberikan class khusus :


{% for item in items %}
{% if loop.first %}
<div class=”carousel-item active” style=”background-image:
url( {{ item.content }})“>
</div>
{% else %}

<div class=”carousel-item” style=”background-image:
url( {{ item.content }})“>
</div>
{% endif %}
{% endfor %}

sehingga hasilnya menjadi seperti ini :

<div class=“carousel-item active“ style=“background-image:
url( ‘http://image/image1.jpg’)“></div>
<div class=“carousel-item“ style=“background-image:
url( ‘http://image/image2.jpg’)“></div>
<div class=“carousel-item“ style=“background-image:
url( ‘http://image/image3.jpg’)“></div>


kini, pada index pertama hasil looping memiliki class active

demikian catatan ini dibuat, semoga bermanfaat buat saya ketika lupa dan bermanfaat bagi yang lain…