templates/blog/article_show.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ article.title }} - WA BENIN{% endblock %}
  5. {% block body %}
  6. <div class="page-header" style="height: 35vh; min-height: 250px; margin-bottom: 40px;">
  7. <div class="container fade-up" style="max-width: 800px; text-align: center;">
  8. <span style="background: var(--gold); color: #fff; padding: 5px 15px; border-radius: 20px; font-size: 0.9rem; font-weight: bold; text-transform: uppercase; margin-bottom: 20px; display: inline-block;">{{ article.category }}</span>
  9. <h1 class="page-title" style="font-size: 2.5rem;">{{ article.title }}</h1>
  10. <div style="color: #ccc; font-size: 1rem; margin-top: 20px; display: flex; justify-content: center; gap: 20px;">
  11. <span><i class="far fa-calendar-alt"></i> {{ article.createdAt|date('d M Y') }}</span>
  12. <span><i class="far fa-user"></i> {{ article.author }}</span>
  13. </div>
  14. </div>
  15. </div>
  17. <section class="section-padding" style="padding-top: 0;">
  18. <div class="container" style="max-width: 800px;">
  19. <div class="fade-up" style="background: #fff; border-radius: var(--border-radius); box-shadow: var(--shadow-soft); overflow: hidden;">
  20. {% if article.image %}
  21. <div style="width: 100%; max-height: 500px; overflow: hidden;">
  22. <img src="{{ article.image }}" alt="{{ article.title }}" style="width: 100%; height: auto; object-fit: cover;">
  23. </div>
  24. {% endif %}
  25. <div style="padding: 40px; font-size: 1.1rem; line-height: 1.8; color: #444;">
  26. {{ article.content|nl2br }}
  27. <div style="margin-top: 40px; padding-top: 30px; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center;">
  28. <div>
  29. <span style="font-weight: bold; color: var(--black-dark);">Partager cet article :</span>
  30. <div class="social-links" style="display: inline-flex; margin-left: 15px; gap: 10px;">
  31. <a href="https://www.facebook.com/sharer/sharer.php?u={{ url('app_article_show', {id: article.id}) }}" target="_blank" rel="noopener noreferrer" style="background: #3b5998; color: #fff; width: 35px; height: 35px;"><i class="fab fa-facebook-f"></i></a>
  32. <a href="https://twitter.com/intent/tweet?url={{ url('app_article_show', {id: article.id}) }}&text={{ article.title|url_encode }}" target="_blank" rel="noopener noreferrer" style="background: #1da1f2; color: #fff; width: 35px; height: 35px;"><i class="fab fa-twitter"></i></a>
  33. <a href="https://api.whatsapp.com/send?text={{ article.title|url_encode }}%20{{ url('app_article_show', {id: article.id}) }}" target="_blank" rel="noopener noreferrer" style="background: #25d366; color: #fff; width: 35px; height: 35px;"><i class="fab fa-whatsapp"></i></a>
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41. </section>
  43. <!-- Articles Récents -->
  44. <section class="section-padding bg-light">
  45. <div class="container">
  46. <h2 style="margin-bottom: 30px; text-align: center;">Articles Récents</h2>
  47. <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;">
  48. {% for recent in recent_articles %}
  49. {% if recent.id != article.id %}
  50. <div class="fade-up" style="background: #fff; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-soft);">
  51. <div style="height: 200px; overflow: hidden;">
  52. <img src="{{ recent.image }}" alt="{{ recent.title }}" style="width: 100%; height: 100%; object-fit: cover;">
  53. </div>
  54. <div style="padding: 20px;">
  55. <span style="color: var(--gold); font-size: 0.8rem; font-weight: bold; text-transform: uppercase;">{{ recent.category }}</span>
  56. <h3 style="margin: 10px 0; font-size: 1.2rem; line-height: 1.3;">{{ recent.title }}</h3>
  57. <a href="{{ path('app_article_show', {id: recent.id}) }}" style="color: var(--black-dark); font-weight: 600;">Lire la suite <i class="fas fa-arrow-right" style="font-size: 0.8rem; margin-left: 5px;"></i></a>
  58. </div>
  59. </div>
  60. {% endif %}
  61. {% endfor %}
  62. </div>
  63. </div>
  64. </section>
  65. {% endblock %}