templates/home/gallerie.html.twig line 1

Open in your IDE?
  1. {% extends 'baseFront.html.twig' %}
  3. {% block title %}Hello HomeController!{% endblock %}
  5. {% block body %}
  6. <main>
  7.         <div class="container px-1 ">
  8.             
  9.                 <h1>Photo gallery </h1>
  10.                 </div>
  11.                 <div class="row">
  12.                 <div class="col-lg-2"></div>
  13.                 <div class="col-lg-8">
  15.                 <div class="gallery-container">
  16.     {% for gallerie in galleries %}
  17.         <div class="gallery-item">
  18.         <a href="{{ asset('uploads/galleriephoto/' ~ gallerie.photo) }}" class="glightbox gallery-item">
  19.             <img src="{{ asset('uploads/galleriephoto/' ~ gallerie.photo) }}" alt="">
  20.         </a>
  21.         
  22.             
  23.         </div>
  24.     {% endfor %}
  25. </div><script>
  26.     const lightbox = GLightbox({
  27.         touchNavigation: true,
  28.         loop: true,
  29.         zoomable: true,
  30.         draggable: true,
  31.     });
  32. </script>
  33. </div><div class="col-lg-2"></div></div><style>
  34. .gallery-container {
  35.     display: grid;
  36.     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  37.     gap: 15px;
  38.     padding: 20px;
  39. }
  41. .gallery-item {
  42.     overflow: hidden;
  43.     border-radius: 10px;
  44.     box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  45. }
  47. .gallery-item img {
  48.     width: 100%;
  49.     height: 100%;
  50.     object-fit: cover;
  51.     transition: transform .3s ease;
  52. }
  54. .gallery-item:hover img {
  55.     transform: scale(1.08);
  56. }</style>
  57. {# CSS Lightbox #}
  58. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
  60. {# JS Lightbox #}
  61. <script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
  62.                 </main>
  65. {% endblock %}