templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ site_setting('site_name', 'ActuFake') }} - {{ site_setting('site_tagline', 'L\'actualité satirique en temps réel') }}{% endblock %}
  5. {% block body %}
  6. <div class="container-fluid px-0">
  7.     {% if featured_articles|length > 0 %}
  8.     {% set hero = featured_articles[0] %}
  9.     <section class="featured-article-hero">
  10.         {% if hero.featuredImage %}
  11.         {% set image_path = hero.featuredImage.path starts with '/' ? hero.featuredImage.path|slice(1) : hero.featuredImage.path %}
  12.         <img src="{{ base_path }}/{{ image_path }}" alt="{{ hero.featuredImage.alt }}">
  13.         {% else %}
  14.         <div style="width: 100%; height: 500px; background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);"></div>
  15.         {% endif %}
  16.         <div class="featured-overlay">
  17.             <div class="container">
  18.                 <span class="category-badge mb-2 d-inline-block">{{ hero.category.name }}</span>
  19.                 <h1>
  20.                     <a href="{{ path('article_show', {slug: hero.slug}) }}" class="text-white text-decoration-none">
  21.                         {{ hero.title }}
  22.                     </a>
  23.                 </h1>
  24.                 <p class="lead mb-3">{{ hero.excerpt|slice(0, 180) }}...</p>
  25.                 <div class="text-white-50">
  26.                     <i class="fas fa-user"></i> {{ hero.author ?? 'Rédaction' }}
  27.                     <span class="mx-2">|</span>
  28.                     <i class="fas fa-clock"></i> {{ hero.publishedAt|date('d M Y, H:i') }}
  29.                     <span class="mx-2">|</span>
  30.                     <i class="fas fa-eye"></i> {{ hero.viewCount }} vues
  31.                 </div>
  32.             </div>
  33.         </div>
  34.     </section>
  35.     {% endif %}
  36. </div>
  38. <div class="container my-5">
  39.     {% if featured_articles|length > 1 %}
  40.     <section class="mb-5">
  41.         <h2 class="section-title">À la une</h2>
  42.         <div class="row g-4">
  43.             {% for article in featured_articles|slice(1, 3) %}
  44.             <div class="col-md-4">
  45.                 <article class="card article-card h-100 border-0">
  46.                     {% if article.featuredImage %}
  47.                     {% set image_path = article.featuredImage.path starts with '/' ? article.featuredImage.path|slice(1) : article.featuredImage.path %}
  48.                     <img src="{{ base_path }}/{{ image_path }}" class="card-img-top" alt="{{ article.featuredImage.alt }}">
  49.                     {% else %}
  50.                     <div class="card-img-top bg-secondary d-flex align-items-center justify-content-center" style="height: 200px;">
  51.                         <i class="fas fa-newspaper fa-4x text-white opacity-25"></i>
  52.                     </div>
  53.                     {% endif %}
  54.                     <div class="card-body">
  55.                         <span class="category-badge mb-2">{{ article.category.name }}</span>
  56.                         <h5 class="card-title mt-2">
  57.                             <a href="{{ path('article_show', {slug: article.slug}) }}">
  58.                                 {{ article.title }}
  59.                             </a>
  60.                         </h5>
  61.                         <p class="card-text text-muted">{{ article.excerpt|slice(0, 120) }}...</p>
  62.                         <div class="d-flex justify-content-between align-items-center">
  63.                             <small class="text-muted">
  64.                                 <i class="fas fa-clock"></i> {{ article.publishedAt|date('d/m/Y') }}
  65.                             </small>
  66.                             <small class="text-muted">
  67.                                 <i class="fas fa-eye"></i> {{ article.viewCount }}
  68.                             </small>
  69.                         </div>
  70.                     </div>
  71.                 </article>
  72.             </div>
  73.             {% endfor %}
  74.         </div>
  75.     </section>
  76.     {% endif %}
  78.     <div class="row g-4">
  79.         <div class="col-lg-8">
  80.             <section class="latest-articles">
  81.                 <h2 class="section-title">Dernières actualités</h2>
  82.                 
  83.                 {% for article in latest_articles %}
  84.                 <article class="article-list-item">
  85.                     <div class="row g-3">
  86.                         <div class="col-md-4">
  87.                             {% if article.featuredImage %}
  88.                             <a href="{{ path('article_show', {slug: article.slug}) }}">
  89.                                 {% set image_path = article.featuredImage.path starts with '/' ? article.featuredImage.path|slice(1) : article.featuredImage.path %}
  90.                                 <img src="{{ base_path }}/{{ image_path }}" class="img-fluid" style="width: 100%; height: 180px; object-fit: cover;" alt="{{ article.featuredImage.alt }}">
  91.                             </a>
  92.                             {% else %}
  93.                             <div class="bg-secondary d-flex align-items-center justify-content-center" style="height: 180px;">
  94.                                 <i class="fas fa-image fa-3x text-white opacity-25"></i>
  95.                             </div>
  96.                             {% endif %}
  97.                         </div>
  98.                         <div class="col-md-8">
  99.                             <span class="category-badge mb-2">{{ article.category.name }}</span>
  100.                             <h3 class="mb-2" style="font-size: 1.5rem;">
  101.                                 <a href="{{ path('article_show', {slug: article.slug}) }}" class="text-decoration-none">
  102.                                     {{ article.title }}
  103.                                 </a>
  104.                             </h3>
  105.                             <p class="text-muted mb-2" style="line-height: 1.6;">{{ article.excerpt|slice(0, 200) }}...</p>
  106.                             <div class="d-flex justify-content-between align-items-center">
  107.                                 <small class="text-muted">
  108.                                     <strong>{{ article.author ?? 'Rédaction ActuFake' }}</strong>
  109.                                 </small>
  110.                                 <small class="text-muted">
  111.                                     {{ article.publishedAt|date('d M Y') }} • {{ article.viewCount }} vues
  112.                                 </small>
  113.                             </div>
  114.                         </div>
  115.                     </div>
  116.                 </article>
  117.                 {% else %}
  118.                 <div class="alert alert-info">
  119.                     <i class="fas fa-info-circle"></i> Aucun article publié pour le moment.
  120.                 </div>
  121.                 {% endfor %}
  122.             </section>
  123.         </div>
  125.         <div class="col-lg-4">
  126.             <aside>
  127.                 <div class="card mb-4 border-0 shadow-sm">
  128.                     <div class="card-header bg-danger text-white">
  129.                         <i class="fas fa-fire"></i> Tendances
  130.                     </div>
  131.                     <div class="list-group list-group-flush">
  132.                         {% for article in popular_articles %}
  133.                         <a href="{{ path('article_show', {slug: article.slug}) }}" class="list-group-item list-group-item-action border-0">
  134.                             <div class="d-flex align-items-start">
  135.                                 <span class="badge bg-danger me-2" style="font-size: 0.9rem; min-width: 25px;">{{ loop.index }}</span>
  136.                                 <div>
  137.                                     <h6 class="mb-1" style="font-weight: 700; line-height: 1.3;">{{ article.title }}</h6>
  138.                                     <small class="text-muted d-block mt-1">
  139.                                         <i class="fas fa-eye"></i> {{ article.viewCount }} vues
  140.                                     </small>
  141.                                 </div>
  142.                             </div>
  143.                         </a>
  144.                         {% endfor %}
  145.                     </div>
  146.                 </div>
  148.                 <div class="card mb-4 border-0 shadow-sm">
  149.                     <div class="card-header bg-dark text-white">
  150.                         <i class="fas fa-th-large"></i> Catégories
  151.                     </div>
  152.                     <div class="list-group list-group-flush">
  153.                         {% for category in categories %}
  154.                         <a href="{{ path('category_show', {slug: category.slug}) }}" class="list-group-item list-group-item-action border-0 d-flex justify-content-between align-items-center">
  155.                             <span style="font-weight: 600;">
  156.                                 {% if category.icon %}
  157.                                 <i class="fas {{ category.icon }} me-2"></i>
  158.                                 {% endif %}
  159.                                 {{ category.name }}
  160.                             </span>
  161.                             <span class="badge bg-dark rounded-pill">{{ category.articles|length }}</span>
  162.                         </a>
  163.                         {% endfor %}
  164.                     </div>
  165.                 </div>
  167.                 <div class="fake-disclaimer shadow-sm">
  168.                     <h6 style="font-weight: 700; color: #856404;">
  169.                         <i class="fas fa-exclamation-triangle"></i> Avertissement
  170.                     </h6>
  171.                     <p class="small mb-0" style="line-height: 1.6;">
  172.                         <strong>{{ site_setting('site_name', 'ActuFake') }} est un site satirique.</strong>
  173.                         Toutes les informations publiées sont fictives et à but humoristique uniquement.
  174.                         Ne les prenez pas au sérieux !
  175.                     </p>
  176.                 </div>
  177.             </aside>
  178.         </div>
  179.     </div>
  180. </div>
  181. {% endblock %}