templates/actualités/index.html.twig line 1

  1. {% extends 'site.html.twig' %}
  3. {% block title %}Actualités{% endblock %}
  5. {% block body %}
  7.         <div class="container-fluid bg-primary py-5 bg-header-actu" style="margin-bottom:40px;" id="banner">
  8.             <div class="row py-5">
  9.                 <div class="col-12 pt-lg-5 mt-lg-5 text-center">
  10.                     <h1 class="display-4 text-white animated zoomIn" style="margin-top: 55px">Actualités</h1>
  11.                     <a href="" class="h5 text-white"></a>
  12.                     
  13.                     <a href="" class="h5 text-white"></a>
  14.                 </div>
  15.             </div>
  16.         </div>
  17.     </div>
  18.     <!-- Navbar End -->
  19.  
  20.           
  21.      
  23.     <!-- Blog Start -->
  24.     <div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
  25.         <div class="container py-5">
  26.             <div class="row g-5">
  27.                 
  28.                 <div class="col-lg-8">
  29.                     <div class="row g-5">
  30.                     {% for actuality in actualities %}
  31.                         <div class="col-md-6 wow slideInUp" data-wow-delay="0.1s">
  32.                             <div class="blog-item bg-light rounded overflow-hidden">
  33.                                 <div class="blog-img position-relative overflow-hidden">
  34.                                 <img class="img-fluid" src="{{ vich_uploader_asset(actuality, 'imageFile') }}" >
  35.                                     
  36.                                     <a class="position-absolute top-0 start-0 bg-primary text-white rounded-end mt-5 py-2 px-4" href="">{{actuality.categories.name}}</a>
  37.                                 </div>
  38.                                 <div class="p-4">
  39.                                     <div class="d-flex mb-3">
  40.                                       
  41.                                         <small><i class="far fa-calendar-alt text-primary me-2"></i>{{actuality.createdAt|date("d/m/Y ") }}</small>
  42.                                     </div>
  43.                                       <h4 class="mb-3">{{ actuality.title }}</h4>
  44.                                          <p>{{ actuality.text[:150] ~ (actuality.text|length > 150 ? '...' : '') }}</p>
  45.                                             <a class="text-uppercase" href="{{ path('app_article', {'id': actuality.id}) }}">En savoir plus <i class="bi bi-arrow-right"></i></a>
  46.                                 </div>
  47.                             </div>
  48.                         </div>
  49.                            {% else %}
  50.            
  51.                <center> <h4>Aucun articles trouvés</h4> </center>
  52.             
  53.         {% endfor %}
  54.                      
  55.                     </div>
  56.                 </div>
  57.                 <!-- Blog list End -->
  58.     
  59.                 <!-- Sidebar Start -->
  60.                 <div class="col-lg-4">
  61.                     <!-- Search Form Start -->
  62.                     <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
  63.                         <div class="input-group">
  64.                             <input type="text" class="form-control p-3" placeholder="Recherche">
  65.                             <button class="btn btn-primary px-4"><i class="bi bi-search"></i></button>
  66.                         </div>
  67.                     </div>
  68.                     <!-- Search Form End -->
  69.     <!-- Category Start -->
  70. <div class="mb-5 wow slideInUp" data-wow-delay="0.1s">
  71.     <div class="section-title section-title-sm position-relative pb-3 mb-4">
  72.         <h3 class="mb-0">Categories</h3>
  73.     </div>
  74.     <div class="link-animated d-flex flex-column justify-content-start">
  75.         <a href="{{ path('app_actu') }}" class="h5 fw-semi-bold bg-light rounded py-2 px-3 mb-2">Toutes</a>
  76.         {% for category in categories %}
  77.             <a href="{{ path('app_actu', {'category': category.id}) }}" class="h5 fw-semi-bold bg-light rounded py-2 px-3 mb-2">{{ category.name }}</a>
  78.         {% endfor %}
  79.     </div>
  80. </div>
  81. <!-- Category End -->
  84.     
  85.                     <!-- Recent Post Start -->
  86.               <div class="mb-5 wow slideInUp custom-div">
  87.                 <div class="section-title section-title-sm position-relative pb-3 mb-4">
  88.                     <h3 class="mb-0">Publications récentes</h3>
  89.                 </div>
  90.                 
  91.                 {% for actuality in actualities %}
  92.                     <div class="d-flex rounded overflow-hidden mb-3">
  93.                         <img class="img-fluid" src="{{ vich_uploader_asset(actuality, 'imageFile') }}" style="width: 100px; height: 100px; object-fit: cover;" alt="">
  94.                             <a href="" style="width: 400px"class="h5 fw-semi-bold d-flex align-items-center bg-light px-3 mb-0">{{actuality.title }}</a>
  95.                     </div>
  96.                 {% endfor %}
  97.                 
  98.             </div>
  99.     
  100.                    
  101.     
  102.                    
  103.     
  104.                    
  105.                 </div>
  106.                 <!-- Sidebar End -->
  107.             </div>
  108.         </div>
  109.     </div>
  110.     <!-- Blog End -->
  111.  
  112.     <script>
  113. document.addEventListener("DOMContentLoaded", function() {
  114.     const categoryLinks = document.querySelectorAll('.category-link');
  115.     categoryLinks.forEach(link => {
  116.         link.addEventListener('click', function(event) {
  117.             event.preventDefault(); // Empêche le comportement par défaut du lien
  118.             
  119.             const categoryId = this.getAttribute('data-category-id');
  120.             
  121.             // Envoi d'une requête au serveur pour récupérer les articles par catégorie
  122.             fetch(`/get_articles_by_category/${categoryId}`)
  123.                 .then(response => response.json())
  124.                 .then(data => {
  125.                     // Manipulation du DOM pour afficher les articles
  126.                     // Vous pouvez mettre à jour votre contenu avec les articles récupérés ici
  127.                     console.log(data); // data contient les articles de la catégorie
  128.                 })
  129.                 .catch(error => {
  130.                     console.error('Une erreur s\'est produite:', error);
  131.                 });
  132.         });
  133.     });
  134. });
  135. </script>
  137. {% endblock %}