templates/front-office/blog/list.html.twig line 1

{% extends "front-office/_base.html.twig" %}

{% block script %}
    <script src="{{ asset('assets/js/blog-list.js') }}"></script>
{% endblock %}

{% block metaDescription %}{% if currentCategory is not null %}{{ currentCategory.metaDescription }}{% endif %}{% endblock %}

{% block content %}

    <div class="blog-list meli-section-90">

        {# Breadcrumb #}
        <div class="breadcrumb">
            <a class="txt-century txt-orange txt-size12 txt-regular txt-underline" href="{{ path('home') }}">Accueil</a>
            <span  class="txt-century txt-orange txt-size12 txt-regular"> > </span>
            <span class="txt-century txt-orange txt-size12 txt-regular">Blog</span>
        </div>

        <section class="content">
            <h1 class="title txt-dancing txt-green txt-bold txt-size40 txt-center">Blog by Sewing So</h1>

            <div class="social-box">
                <div class="meli-section-20 meli-around-center">
                    <div>
                        <a href="https://fr-fr.facebook.com/SewingSo33/" target="_blank">
                            <img src="{{ asset('assets/img/icons/facebook.png') }}" alt="Facebook">
                        </a>
                    </div>
                    <div>
                        <a href="https://www.youtube.com/c/SewingSoLaCabane%C3%A0coudre?app=desktop" target="_blank">
                            <img src="{{ asset('assets/img/icons/icone-youtube.png') }}" alt="Youtube">
                        </a>
                    </div>
                    <div>
                        <a href="https://www.instagram.com/sewing_so_/?hl=fr" target="_blank">
                            <img src="{{ asset('assets/img/icons/icone-instagram.png') }}" alt="Instagram">
                        </a>
                    </div>
                </div>
            </div>

            {# Searching #}
            <div class="searching-box meli-center-center">
                <form action="#" method="GET" class="meli-center-center meli-flex-col">
                    <label for="search" class="txt-century">Rechercher :</label>
                    <input type="text" name="search" id="search" value="{{ app.request.get('search') }}">
                    <div class="btn-box">
                        <button class="btn-base"><span>Rechercher</span></button>
                    </div>
                </form>
            </div>

            {# DESKTOP CATEGORY #}
            <div class="category-box">
                <div class="meli-section-50 meli-around-center item-box">
                    {% for c in categories %}
                        <div class="item meli-width-25 meli-center-center">
                            <a href="{{ path('blog_list_by_category',{'cat':c.id,'slug':c.name|url}) }}"
                               class="txt-roboto txt-size15 txt-red txt-center {% if currentCategory is not null and currentCategory.name == c.name %}txt-underline{% endif %}">{{ c.name }}</a>
                        </div>
                    {% endfor %}
                </div>
            </div>

            {# RESPONSIVE CATEGORY #}
            <div class="resp-category-box">
                <div class="meli-section-80">
                    <p class="txt-center" id="js-resp-cat-btn">
                        <span class="text txt-century txt-bold txt-red txt-size20">
                           {% if currentCategory is not null %}
                                {{ currentCategory.name }}
                            {% else %}
                                Les catégories
                            {% endif %}
                        </span>
                        <span class="icon"></span>
                    </p>
                    <div class="list meli-section-50" id="js-resp-cat-list">
                        <div class="item-box meli-flex-col meli-center-center">
                            {% for c in categories %}
                                <div class="item">
                                    <a href="{{ path('blog_list_by_category',{'cat':c.id,'slug':c.name|url}) }}" class="txt-roboto txt-size15 txt-bold txt-red">{{ c.name }}</a>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>


            <div class="articles-box meli-section-80">
                {% for key, article in articles %}
                    <article class="item meli-start-start">
                        <div class="img-box meli-center-center meli-width-40">
                            <img src="{{ asset('uploads/articles/article-'~article.id~'/'~article.picture) }}"
                                 alt="{{ article.pictureAlt }}">
                        </div>

                        <div class="text-box meli-section-45">
                            <h2 class="txt-century txt-green txt-bold txt-size35">{{ article.title }}</h2>

                            <div class="intro">
                                {{ article.intro|raw }}
                            </div>


                            <a href="{{ path('blog_read',{'id':article.id,'slug':article.title|url}) }}" class="plus txt-century txt-bold txt-size15 txt-red">
                                Plus <span class="plus-icon"></span>
                            </a>

                        </div>

                        {% if key != (articles|length)-1 %}
                            <div class="divider"></div>
                        {% endif %}
                    </article>

                {% endfor %}
            </div>


        </section>

        {# PAGNIATION #}
        {% if articles is not empty %}
            {% include "front-office/partials/_pagination.html.twig" %}
        {% endif %}



    </div>


    <div class="blog-list-frontpage">
        <p class="title txt-dancing txt-bold txt-size35 txt-green txt-center">Ces articles qui peuvent vous intéresser</p>

        <div class="content meli-center-center">
            <div class="meli-section-65">
                {% include "front-office/partials/_blog_frontpage.html.twig" %}
            </div>
        </div>
    </div>





{% endblock %}