templates/galerie/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Arvernus - Galery{% endblock %}
  5. {% block body %}
  6.     <!-- Lightbox2 CSS -->
  7.     <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" rel="stylesheet">
  10.     <style>
  11.         .gallery-img {
  12.             width: 100%; /* Ensure the image fits within its container */
  13.             height: 200px; /* Set a fixed height for all images */
  14.             object-fit: cover; /* Ensures the image covers the box without stretching */
  15.         }
  16.     </style>
  18.     <section class="page-title" style="background-image: url(images/background/breadcumb-bg.jpg);">
  19.         <div class="auto-container">
  20.             <div class="title-outer text-center">
  21.                 <h1 class="title">Galerie</h1>
  22.                 <ul class="page-breadcrumb">
  23.                     <li><a href="{{ path('app_default') }}"><i class="fa-solid fa-home"></i>Galerie</a></li>
  24.                 </ul>
  25.             </div>
  26.         </div>
  27.     </section>
  30.     <section class="blog-section gap-two">
  31.         <div class="auto-container">
  32.             <div class="sec-title text-center">
  33.                 <h2 class="letters-slide-up text-split">Galerie</h2>
  35.             </div>
  37.             <div class="row">
  38.                 {% for i in 1..32 %}
  39.                     <div class="col-lg-4 col-md-6">
  40.                         <!-- Blog Single Box -->
  41.                         <article class="blog-single-box">
  42.                             <div class="post-item">
  43.                                 <figure class="blog-thumb overlay-anim">
  44.                                     <!-- Add a link wrapping the image for the lightbox -->
  45.                                     <a href="{{ asset('images/galerie/' ~ i ~ '.jpg') }}" data-lightbox="gallery" data-title="Image {{ i }}">
  46.                                         <img class="gallery-img" src="{{ asset('images/galerie/' ~ i ~ '.jpg') }}" alt="Image {{ i }}">
  47.                                     </a>
  48.                                 </figure>
  49.                             </div>
  50.                         </article>
  51.                     </div>
  52.                 {% endfor %}
  53.             </div>
  54.         </div>
  55.     </section>
  58. {% endblock %}