templates/pages/galerie.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Galerie - WA BENIN en images{% endblock %}
  5. {% block body %}
  6. <div class="page-header" style="height: 35vh; min-height: 250px; background-image: linear-gradient(rgba(31, 31, 31, 0.8), rgba(31, 31, 31, 0.8)), url('https://images.unsplash.com/photo-1501281668745-f7f57925c3b4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); margin-bottom: 40px;">
  7. <div class="container fade-up">
  8. <h1 class="page-title">Galerie Média</h1>
  9. <p style="font-size: 1.2rem; color: var(--gold); max-width: 600px; margin: 0 auto;">Revivez les moments forts de nos événements en images et en vidéos.</p>
  10. </div>
  11. </div>
  13. <section class="section-padding" style="padding-top: 0;">
  14. <div class="container">
  15. <!-- Filtres -->
  16. <div style="display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 40px;">
  17. <a href="{{ path('app_galerie') }}" class="btn {% if not current_category %}btn-primary{% else %}btn-outline{% endif %}" style="padding: 8px 20px;">Tout voir</a>
  18. {% for cat in categories %}
  19. <a href="{{ path('app_galerie', {category: cat}) }}" class="btn {% if current_category == cat %}btn-primary{% else %}btn-outline{% endif %}" style="padding: 8px 20px;">{{ cat }}</a>
  20. {% endfor %}
  21. </div>
  23. <!-- Masonry Layout -->
  24. <div style="columns: 3 300px; gap: 20px;">
  25. {% for item in images %}
  26. {% set is_youtube = 'youtube.com' in item.image or 'youtu.be' in item.image %}
  27. {% set img_src = item.image %}
  28. {% if item.isVideo and is_youtube %}
  29. {% set yt_id = item.image|split('v=')|last|split('&')|first|split('/')|last %}
  30. {% set img_src = 'https://img.youtube.com/vi/' ~ yt_id ~ '/0.jpg' %}
  31. {% endif %}
  33. <div class="fade-up gallery-item" style="margin-bottom: 20px; break-inside: avoid; border-radius: var(--border-radius); overflow: hidden; position: relative; cursor: pointer;" onclick="openLightbox('{{ item.image }}', {{ item.isVideo ? 'true' : 'false' }})">
  34. <img src="{{ img_src }}" alt="{{ item.title }}" style="width: 100%; display: block; transition: transform 0.3s;">
  36. {% if item.isVideo %}
  37. <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(244, 180, 0, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
  38. <i class="fas fa-play" style="color: #fff; font-size: 1.5rem; margin-left: 5px;"></i>
  39. </div>
  40. {% else %}
  41. <div style="position: absolute; top:0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 0.3s; display: flex; align-items: center; justify-content: center;">
  42. <i class="fas fa-search-plus fa-2x" style="color: #fff;"></i>
  43. </div>
  44. {% endif %}
  45. </div>
  46. {% else %}
  47. <p style="text-align: center; grid-column: 1 / -1;">Aucun média disponible pour le moment.</p>
  48. {% endfor %}
  49. </div>
  51. {% if total_pages > 1 %}
  52. <div style="margin-top: 40px; display: flex; justify-content: center; gap: 10px;">
  53. {% for i in 1..total_pages %}
  54. <a href="{{ path('app_galerie', {page: i, category: current_category}) }}" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; {% if current_page == i %}background: var(--gold); color: #fff; border: none;{% else %}background: #fff; border: 1px solid #ddd; color: var(--black-dark);{% endif %} border-radius: 8px; font-weight: bold;">
  55. {{ i }}
  56. </a>
  57. {% endfor %}
  58. </div>
  59. {% endif %}
  60. </div>
  61. </section>
  63. <style>
  64. /* Hover effect for masonry items */
  65. .gallery-item:hover > img {
  66. transform: scale(1.05);
  67. }
  68. .gallery-item:hover > div:not(.fa-play) {
  69. opacity: 1 !important;
  70. }
  71. </style>
  73. <!-- Lightbox Modal -->
  74. <div id="lightbox" style="display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); align-items: center; justify-content: center;">
  75. <span onclick="closeLightbox()" style="position: absolute; top: 20px; right: 30px; color: white; font-size: 40px; font-weight: bold; cursor: pointer;">&times;</span>
  76. <div id="lightbox-content" style="max-width: 90%; max-height: 90%; text-align: center;"></div>
  77. </div>
  79. <script>
  80. function openLightbox(url, isVideo) {
  81. const lightbox = document.getElementById('lightbox');
  82. const content = document.getElementById('lightbox-content');
  83. lightbox.style.display = 'flex';
  85. if (isVideo) {
  86. let embedUrl = url;
  87. if (url.includes('youtube.com/watch?v=')) {
  88. embedUrl = url.replace('watch?v=', 'embed/');
  89. } else if (url.includes('youtu.be/')) {
  90. embedUrl = url.replace('youtu.be/', 'youtube.com/embed/');
  91. }
  92. content.innerHTML = `<iframe width="800" height="450" style="max-width: 100%; border: none;" src="${embedUrl}?autoplay=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
  93. } else {
  94. content.innerHTML = `<img src="${url}" style="max-width: 100%; max-height: 90vh; border-radius: 8px;">`;
  95. }
  96. }
  98. function closeLightbox() {
  99. document.getElementById('lightbox').style.display = 'none';
  100. document.getElementById('lightbox-content').innerHTML = ''; // Stop video
  101. }
  102. </script>
  103. {% endblock %}