templates/entry/thematic.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% from '/macro/breadcrumb.html.twig' import breadcrumb %}
  3. {% from '/macro/newsCard.html.twig' import newsCard %}
  5. {% block mainClass %}c-news-list{% endblock %}
  6. {% set currentPage = app.request.query.get('p', 1) %}
  8. {% block body %}
  9.     <section class="c-hero">
  10.         <div class="o-wrapper-100vw c-hero__wrapper c-news-list__hero-wrapper">
  11.             <div class="o-wrapper">
  12.                 {{ breadcrumb(entry.title) }}
  13.             </div>
  15.             <div class="o-wrapper-full c-hero__flex-wrapper">
  16.                 <div class="o-wrapper-10-column c-hero__item c-hero__text-wrapper">
  17.                     <div class="c-hero__text-inner">
  18.                         <h1 class="c-h1 align-center c-hero__title">{{ entry.title }}</h1>
  19.                         {% if entry.summary %}
  20.                             <p class="c-hero__summary">{{ entry.summary | nl2br }}</p>
  21.                         {% endif %}
  22.                     </div>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.     </section>
  28.     <div>
  29.         {% if thematics|length > 0 %}
  30.             {% set category_options = {
  31.                 breakpoints: {
  32.                     320: {
  33.                         slidesPerView: 'auto',
  34.                         spaceBetween: 24,
  35.                         navigation: false
  36.                     },
  37.                     565: {
  38.                         slidesPerView: 5,
  39.                         spaceBetween: 12,
  40.                         navigation: {
  41.                             nextEl: '.c-swiper__button-next',
  42.                             prevEl: '.c-swiper__button-prev'
  43.                         }
  44.                     },
  45.                     1024: {
  46.                         slidesPerView: 7,
  47.                         spaceBetween: 12,
  48.                         navigation: {
  49.                             nextEl: '.c-swiper__button-next',
  50.                             prevEl: '.c-swiper__button-prev'
  51.                         }
  52.                     }
  53.                 }
  54.             } %}
  55.             <div class="c-news-list__category-filter">
  56.                 <h2 class="c-news-list__category-title u-picto-bottom">{{ 'news_list.category_filter'|trans }}</h2>
  57.                 <div class="o-wrapper-10-column">
  58.                     <div class="swiper" data-controller="carousel"
  59.                          data-carousel-options-value="{{ category_options|json_encode }}">
  60.                         <div class="swiper-wrapper">
  61.                             {% for thematic in thematics %}
  62.                                 <div class="c-news-list__category-filter-item swiper-slide">
  63.                                     <a class="c-news-list__category-filter-link"
  64.                                        href="{{ get_entry_path(thematic, 'news_list_by_thematic') }}">
  65.                                         <div>
  66.                                             <img class="c-news-list__category-image"
  67.                                                  src="{{ moka_media_filtered_path(thematic.icon, 'thematic_icon') }}"
  68.                                                  alt="{{ thematic.title }}">
  69.                                             <p class="u-mb-0">{{ thematic.title }}</p>
  70.                                         </div>
  71.                                     </a>
  72.                                 </div>
  73.                             {% endfor %}
  74.                         </div>
  75.                         <div class="u-align-center u-hidden@until-sm">
  76.                             <div class="c-swiper__navigation c-slider__swiper-navigation">
  77.                                 <div class="c-swiper__button c-swiper__button-prev"></div>
  78.                                 <div class="c-swiper__button c-swiper__button-next"></div>
  79.                             </div>
  80.                         </div>
  81.                     </div>
  82.                 </div>
  83.             </div>
  84.         {% endif %}
  86.         <div class="c-tabs c-news-list__tabs">
  87.             {% set type_options = {
  88.                 slidesPerView: 'auto',
  89.                 navigation: false,
  90.                 spaceBetween: 24
  91.             } %}
  92.             {% set currentPath = path(app.request.attributes.get('_route'),app.request.attributes.get('_route_params')) %}
  93.             <div class="c-tabs__inner swiper" data-controller="carousel"
  94.                  data-carousel-options-value="{{ type_options|json_encode }}">
  95.                 <div class="c-tabs__list swiper-wrapper">
  96.                     <div class="c-tabs__item swiper-slide">
  97.                         <a class="c-tabs__tab{% if app.request.query.get('type') == '' %} is-active{% endif %}"
  98.                            href="{{ currentPath }}">{{ 'news_list.type_filter.all'|trans }} ({{ newsCount }})</a>
  99.                     </div>
  100.                     <div class="c-tabs__item swiper-slide">
  101.                         <a class="c-tabs__tab{% if app.request.query.get('type') == 'article' %} is-active{% endif %}"
  102.                            href="{{ currentPath }}?type=article">{{ 'news_list.type_filter.article'|trans }}
  103.                             ({{ articleCount }})</a>
  104.                     </div>
  105.                     <div class="c-tabs__item swiper-slide">
  106.                         <a class="c-tabs__tab{% if app.request.query.get('type') == 'tuto' %} is-active{% endif %}"
  107.                            href="{{ currentPath }}?type=tuto">{{ 'news_list.type_filter.tuto'|trans }} ({{ tutoCount }}
  108.                             )</a>
  109.                     </div>
  110.                 </div>
  111.             </div>
  112.         </div>
  113.     </div>
  115.     {% if newslist | length > 0 %}
  116.         <section class="c-news-list__results">
  117.             <div class="o-wrapper-12-column-xl">
  118.                 <div class="o-layout--with-margin">
  119.                     {% for news in newslist %}
  120.                         <div class="o-layout__item--third">
  121.                             {{ newsCard(news, null, 150) }}
  122.                         </div>
  123.                     {% endfor %}
  124.                 </div>
  125.             </div>
  127.             {% set pageCount = (newslist.nbResults / newslist.maxPerPage) | round(0, 'ceil') %}
  128.             {% set queryParams = app.request.query.all %}
  129.             {% if entry.slug is defined %}
  130.                 {% set queryParams = queryParams|merge({slug: entry.slug}) %}
  131.             {% endif %}
  132.             <div class="c-pagination">
  133.                 <ul class="c-pagination__list">
  134.                     {% if newslist.hasPreviousPage %}
  135.                         <li class="c-pagination__item c-pagination__item--prev">
  136.                             <a class="c-pagination__link c-pagination__arrow c-pagination__arrow--prev"
  137.                                href="{{ path(app.request.attributes.get('_route'), queryParams|merge({ p: newslist.previousPage }) ) }}">
  138.                                 <span class="u-sr-only">Précedent</span>
  139.                             </a>
  140.                         </li>
  141.                     {% endif %}
  142.                     {% for p in 1..pageCount %}
  143.                         <li class="c-pagination__item">
  144.                             {% if currentPage == p %}
  145.                                 <span class="c-pagination__current">{{ p }}</span>
  146.                             {% else %}
  147.                                 <a class="c-pagination__link"
  148.                                    href="{{ path(app.request.attributes.get('_route'), queryParams|merge({ p: p }) ) }}">{{ p }}</a>
  149.                             {% endif %}
  150.                         </li>
  151.                     {% endfor %}
  152.                     {% if newslist.hasNextPage %}
  153.                         <li class="c-pagination__item c-pagination__item--next">
  154.                             <a class="c-pagination__link c-pagination__arrow c-pagination__arrow--next"
  155.                                href="{{ path(app.request.attributes.get('_route'), queryParams|merge({ p: newslist.nextPage }) ) }}">
  156.                                 <span class="u-sr-only">Suivant</span>
  157.                             </a>
  158.                         </li>
  159.                     {% endif %}
  160.                 </ul>
  161.             </div>
  162.         </section>
  163.     {% endif %}
  165. {% endblock %}