{% extends "base.html.twig" %}{% block content %} {% include "fragments/_banner.html.twig" %} <section class="medias"> <div class="filters"> <ul class="d-flex w-100 justify-content-center"> <li class="p-3"><a href="#" data-filter="*" class="btn btn-outline-light active">{% trans %}TOUS{% endtrans %}</a></li> {% for theme in content.themes %} {% if theme.images|length %} <li class="p-3"><a href="#" data-filter="{{ ".theme_"~loop.index }}" class="btn btn-outline-light">{{ theme.titre }}</a></li> {% endif %} {% endfor %} </ul> </div> <div class="container"> <div class="row gx-2 gy-3 mt-3 isotope-grid"> {% for theme in content.themes %} {% set theme_cpt = loop.index %} {% for media in theme.images %} <a href="{{ media.formats['sulu-large'] }}" data-toggle="lightbox" data-gallery="galerie" class="col-6 col-lg-4 col-xxl-3 item {{ "theme_"~theme_cpt }}"> <img src="{{ media.formats['sulu-400x400'] }}" class="w-100"> <h3 class="fs-6 my-2 m-0">{{ media.title }}</h3> <hr class="my-1 mx-1"> {{ media.description }} </a> {% endfor %} {% endfor %} </div> </div> </section> {% endblock %}