{% if catAlbum|length > 0 %}
 <!-- ======= Portfolio Section ======= -->
<div id="albumCat" class="portfolio">
    {% if app.request.attributes.get('_route') == "catAlbum" %}
        <div class="section-title">
        <h1 class="sectionTitre">Albums</h1>
    </div>

    <ul id="portfolio-flters" class="d-flex filters justify-content-center" data-aos="fade-up" data-aos-delay="100">
        <li data-filter="*" class="filter-active">Tous</li>
        {% for cat in catFilter %}
        <li data-filter=".filter-{{ cat.categorie.id }}">{{ cat.categorie.translations[app.request.locale].name|default('')|replaceConfig()|replaceCoord() }}</li>
        {% endfor %}
    </ul>
    {% endif %}

    <div class="albums portfolio-container filter" data-aos="fade-up" data-aos-delay="200">
    {% for cat in catAlbum %}
        <div class="inAlbum style1 filter-item portfolio-item filter-{{ cat.categorie.id }}">
            <span class="image bgrps" data-bg="{{ asset(catAlbumImg ~ cat.imageName) }}">
                <div class="croix1"></div>
                <div class="croix2"></div>
                <!-- <img data-src="{{ asset(catAlbumImg ~ cat.imageName) }}" alt="{{ cat.translations[app.request.locale].name|default('') }}" /> -->
            </span>
            <a href="{{ path('album', {'_locale': app.request.locale, 'id':cat.id}) }}">
                <div class="titreAlbum">{{ cat.translations[app.request.locale].name|default('')|replaceConfig()|replaceCoord() }}</div>
                <div class="content d-none">
                    <p>Sed nisl arcu euismod sit amet nisi lorem etiam dolor veroeros et feugiat.</p>
                </div>
            </a>
        </div>
    {% endfor %}
    </div>
</div><!-- End Portfolio Section -->
{% endif %}