templates/article/show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ article.title }} - {{ site_setting('site_name', 'ActuFake') }}{% endblock %}
  4. {% block description %}{{ article.excerpt }}{% endblock %}
  6. {% block body %}
  7. <article class="container my-5">
  8.     {% if is_preview|default(false) %}
  9.     <div class="alert alert-info shadow-sm">
  10.         <i class="fas fa-eye"></i> Mode prévisualisation - Article non publié
  11.     </div>
  12.     {% endif %}
  14.     <div class="row">
  15.         <div class="col-lg-10 mx-auto">
  16.             <div class="alert alert-warning border-warning border-2 mb-4">
  17.                 <i class="fas fa-exclamation-triangle"></i>
  18.                 <strong>ARTICLE SATIRIQUE</strong> — Cette information est FICTIVE et à but humoristique uniquement.
  19.             </div>
  21.             <header class="article-header mb-5">
  22.                 <div class="mb-3">
  23.                     <span class="category-badge">{{ article.category.name }}</span>
  24.                 </div>
  25.                 
  26.                 <h1 class="display-3 fw-bold mb-3" style="line-height: 1.1; letter-spacing: -1px;">
  27.                     {{ article.title }}
  28.                 </h1>
  29.                 
  30.                 {% if article.subtitle %}
  31.                 <h2 class="h3 text-muted fw-normal mb-4" style="line-height: 1.4;">{{ article.subtitle }}</h2>
  32.                 {% endif %}
  34.                 <div class="d-flex flex-wrap align-items-center gap-3 mb-4 pb-4 border-bottom">
  35.                     <div class="text-muted">
  36.                         <i class="fas fa-user me-1"></i>
  37.                         <strong>{{ article.author ?? 'Rédaction ActuFake' }}</strong>
  38.                     </div>
  39.                     <div class="text-muted">
  40.                         <i class="fas fa-clock me-1"></i>
  41.                         {{ article.publishedAt|date('d M Y à H:i') }}
  42.                     </div>
  43.                     <div class="text-muted">
  44.                         <i class="fas fa-eye me-1"></i>
  45.                         {{ article.viewCount }} vues
  46.                     </div>
  47.                 </div>
  49.                 <div class="d-flex gap-2 mb-4">
  50.                     <a href="https://twitter.com/intent/tweet?text={{ article.title|url_encode }}&url={{ url('article_show', {slug: article.slug}) }}" 
  51.                        target="_blank" 
  52.                        class="btn btn-outline-dark">
  53.                         <i class="fab fa-twitter"></i> Twitter
  54.                     </a>
  55.                     <a href="https://www.facebook.com/sharer/sharer.php?u={{ url('article_show', {slug: article.slug}) }}" 
  56.                        target="_blank" 
  57.                        class="btn btn-outline-dark">
  58.                         <i class="fab fa-facebook"></i> Facebook
  59.                     </a>
  60.                 </div>
  61.             </header>
  63.             {% if article.featuredImage %}
  64.             <figure class="mb-5">
  65.                 {% set image_path = article.featuredImage.path starts with '/' ? article.featuredImage.path|slice(1) : article.featuredImage.path %}
  66.                 <img src="{{ base_path }}/{{ image_path }}" 
  67.                      alt="{{ article.featuredImage.alt }}" 
  68.                      class="img-fluid w-100"
  69.                      style="max-height: 600px; object-fit: cover;">
  70.                 {% if article.featuredImage.alt %}
  71.                 <figcaption class="text-muted small mt-2 fst-italic">{{ article.featuredImage.alt }}</figcaption>
  72.                 {% endif %}
  73.             </figure>
  74.             {% endif %}
  76.             <div class="article-excerpt lead mb-5 p-4 bg-light border-start border-4 border-danger" style="line-height: 1.7;">
  77.                 {{ article.excerpt }}
  78.             </div>
  80.             <div class="article-body" style="font-size: 1.125rem; line-height: 1.8;">
  81.                 {{ article.body|raw }}
  82.             </div>
  84.             {% if article.tags|length > 0 %}
  85.             <div class="article-tags mt-5 pt-4 border-top">
  86.                 <div class="mb-2 text-muted small text-uppercase fw-bold" style="letter-spacing: 1px;">Tags</div>
  87.                 {% for tag in article.tags %}
  88.                 <a href="{{ path('search', {q: tag.name}) }}" class="badge bg-dark text-decoration-none me-2 mb-2 px-3 py-2" style="font-size: 0.85rem;">
  89.                     #{{ tag.name }}
  90.                 </a>
  91.                 {% endfor %}
  92.             </div>
  93.             {% endif %}
  95.             <div class="alert alert-warning border-warning border-2 mt-5 shadow-sm">
  96.                 <h6 class="fw-bold" style="color: #856404;">
  97.                     <i class="fas fa-info-circle"></i> Rappel important
  98.                 </h6>
  99.                 <p class="mb-0" style="line-height: 1.7;">
  100.                     Cet article est une <strong>parodie satirique</strong>. 
  101.                     Les faits, citations et informations mentionnés sont <strong>totalement fictifs</strong>.
  102.                     {% if article.isAiGenerated %}
  103.                     Ce contenu a été généré avec l'assistance d'une intelligence artificielle.
  104.                     {% endif %}
  105.                 </p>
  106.             </div>
  108.             {% if related_articles|length > 0 %}
  109.             <section class="related-articles mt-5 pt-5 border-top">
  110.                 <h3 class="section-title">Vous aimerez aussi</h3>
  111.                 <div class="row g-4">
  112.                     {% for related in related_articles %}
  113.                     <div class="col-md-4">
  114.                         <article class="card article-card h-100 border-0 shadow-sm">
  115.                             {% if related.featuredImage %}
  116.                             <img src="/{{ related.featuredImage.path }}" class="card-img-top" alt="{{ related.title }}" style="height: 200px;">
  117.                             {% else %}
  118.                             <div class="bg-secondary d-flex align-items-center justify-content-center" style="height: 200px;">
  119.                                 <i class="fas fa-newspaper fa-3x text-white opacity-25"></i>
  120.                             </div>
  121.                             {% endif %}
  122.                             <div class="card-body">
  123.                                 <span class="category-badge mb-2">{{ related.category.name }}</span>
  124.                                 <h6 class="card-title mt-2" style="line-height: 1.3;">
  125.                                     <a href="{{ path('article_show', {slug: related.slug}) }}" class="text-decoration-none">
  126.                                         {{ related.title }}
  127.                                     </a>
  128.                                 </h6>
  129.                                 <small class="text-muted d-block mt-2">
  130.                                     <i class="fas fa-clock"></i> {{ related.publishedAt|date('d M Y') }}
  131.                                 </small>
  132.                             </div>
  133.                         </article>
  134.                     </div>
  135.                     {% endfor %}
  136.                 </div>
  137.             </section>
  138.             {% endif %}
  139.         </div>
  140.     </div>
  141. </article>
  142. {% endblock %}