templates/templates/blog.html.twig line 1

Open in your IDE?
  1. {% extends "master.html.twig" %}
  3. {% block meta %}
  4.     {% include "@SuluWebsite/Extension/seo.html.twig" with {
  5.         "seo": extension.seo|default([]),
  6.         "content": content|default([]),
  7.         "urls": urls|default([]),
  8.         "shadowBaseLocale": shadowBaseLocale|default(),
  9.         "defaultLocale": request.defaultLocale|default('de')
  10.     } %}
  11. {% endblock %}
  13. {% block style %}    
  14.     <link rel="stylesheet" href="{{ absolute_url(asset("build/website/css/blog.css")) }}">
  15. {% endblock %}
  17. {% block bgImages %}
  18.     {% for image in content.images %}
  19.         {{ image.url }}
  20.     {% endfor %}
  21. {% endblock %}
  23. {% block ogImages %}{% for image in content.images %}{{ image.url }}{% endfor %}{% endblock %}
  25. {% block content %}
  26.     <div class="content-actu">
  27.         <div class="filter">
  28.             {# define array and merge in if tag name doesn't exist #}
  29.             {% set tagsName = [] %}
  30.             <div class="filter-tag all active" data-id="empty">
  31.                 Tout
  32.             </div>
  33.             {% for article in content.articles %}
  34.                 {% for tag in article.excerpt.tags %}
  35.                     {% if tag.name not in tagsName %}
  36.                         {% set tagsName = tagsName|merge([tag.name]) %}
  37.                             <div class="filter-tag {{ " " }} {{ tag.name|lower|replace({ 'á':'a', 'é':'e', 'í':'i', 'ó':'o', 'ú':'u' }) }}" data-id="{{ tag.name|lower|replace({ 'á':'a', 'é':'e', 'í':'i', 'ó':'o', 'ú':'u' }) }}">
  38.                                 {{ tag.name|replace({'-':' '}) }}
  39.                             </div>
  40.                     {% endif %}
  41.                 {% endfor %}
  42.             {% endfor %}
  43.         </div>    
  44.         <div class="teaser_actus">
  45.             {% for article in content.articles %}
  46.                 {% if article.excerpt.tags|length > 0 %}
  47.                     <div class="container-article {{ " " }} {% for tag in article.excerpt.tags %}{{ tag.name|lower|replace({ 'á':'a', 'é':'e', 'í':'i', 'ó':'o', 'ú':'u' }) }}{{ " " }}{% endfor %}" style="display: block">
  48.                         <article class="article">
  49.                             <a class="img-actu" href="{{ sulu_content_path(article.content.content.routePath) }}">
  50.                                 <div class="tags {{ " " }} {{ article.excerpt.tags|first.name|lower|replace({ 'á':'a', 'é':'e', 'í':'i', 'ó':'o', 'ú':'u' })  }}">{{article.excerpt.tags|first.name|replace({'-':' '})|lower  }}</div>
  51.                                 {% if article.content.content.banner %}
  52.                                     <div class="image lazy" data-src="{{  article.content.content.banner[0].url }}"></div>
  53.                                 {% endif %}
  54.                             </a>
  55.                             <div>
  56.                                 <div class="date_actu">{{ article.authored|date("d / m / Y") }}</div>
  57.                                 <h2><a href="{{ sulu_content_path(article.content.content.routePath) }}">{{ article.title }}</a></h2>
  58.                                 <button aria-label="more" class="btn btn-light"><a href="{{ sulu_content_path(article.content.content.routePath) }}">En savoir plus</a></button>
  59.                             </div>
  60.                         </article>
  61.                     </div>
  62.                 {% endif %}
  63.             {% endfor %}
  64.         </div>
  65.     </div>
  66.     
  67. {% endblock %}
  68. {% block javascripts %}
  69.     <script>
  70. $(document).ready(function() {
  71.     function applyTagFilter(tag) {
  72.         if (tag === "empty") {
  73.             $(".filter .active-tag").removeClass("active-tag");
  74.             $(".all").addClass('active');
  75.             $(".container-article").show();
  76.         } else {
  77.             $(".all").removeClass('active');
  78.             $(".filter .active-tag").removeClass("active-tag");
  79.             $(`[data-id="${tag}"]`).addClass("active-tag");
  80.             $(".container-article").show();
  81.             var choice = "." + tag;
  82.             if (choice) {
  83.                 $(".container-article").not(choice).hide();
  84.             }
  85.         }
  87.         $(".article").removeClass("right left");
  88.         $(".container-article:visible article").each(function(index, el) {
  89.             if (index % 2 !== 0) {
  90.                 $(el).addClass("right");
  91.             } else {
  92.                 $(el).addClass("left");
  93.             }
  94.         });
  95.     }
  97.     // Lire l'URL actuelle et appliquer le filtre si un tag est présent
  98.     var urlParams = new URLSearchParams(window.location.search);
  99.     var initialTag = urlParams.get('tag');
  100.     if (initialTag) {
  101.         applyTagFilter(initialTag);
  102.     }
  104.     // Événement pour les clics sur les tags
  105.     $('.filter-tag').click(function(e) {
  106.         var tag = $(this).attr("data-id");
  107.         if (tag === "empty") {
  108.             history.pushState(null, '', window.location.pathname);
  109.         } else {
  110.             history.pushState(null, '', window.location.pathname + '?tag=' + tag);
  111.         }
  112.         applyTagFilter(tag);
  113.     });
  115.     // Événement pour la navigation dans l'historique
  116.     window.addEventListener('popstate', function() {
  117.         var tag = new URLSearchParams(window.location.search).get('tag');
  118.         applyTagFilter(tag || "empty");
  119.     });
  120. });
  122.     </script>
  123.     <script>window.breadcrumbMap={'json-ld-breadcrumb':'JSON-LD Breadcrumb'}</script>
  124. {% endblock %}