templates/gallery/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Galerie
  4. {% endblock %}
  6. {% block content %}
  8.     <h1 class="text-center pb-2">GALERIE PHOTOS</h1>
  10.     <div class="cont-gallery" id="gallery">
  12.         <div class="gallery">
  13.             <div class="gallery-item">
  14.                 {% for image in images %}
  15.                     <img src="/uploads/{{ image.image }}" class="mb-2 galeryPict" alt="test" data-toggle="modal" data-target="#modal">
  16.                 {% endfor %}
  17.             </div>
  18.         </div>
  20.         <div class="gallery">
  21.             <div class="gallery-item">
  22.                 {% for image in images %}
  23.                     <img src="/uploads/{{ image.image2 }}" class="mb-2 galeryPict" alt="test2" data-toggle="modal" data-target="#modal">
  24.                 {% endfor %}
  25.             </div>
  26.         </div>
  28.         <div class="gallery">
  29.             <div class="gallery-item">
  30.                 {% for image in images %}
  31.                     <img src="/uploads/{{ image.image3 }}" class="mb-2 galeryPict" alt="test3" data-toggle="modal" data-target="#modal">
  32.                 {% endfor %}
  33.             </div>
  34.         </div>
  36.     </div>
  38.     <!-- Single Modal for all images -->
  39.     <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  40.         <div class="modal-dialog modal-lg" role="document">
  41.             <div class="modal-content">
  42.                 <div class="modal-header">
  43.                     <h5 class="modal-title" id="modalLabel">Galerie Photos</h5>
  44.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  45.                         <span aria-hidden="true">&times;</span>
  46.                     </button>
  47.                 </div>
  48.                 <div class="modal-body">
  49.                     <div id="carousel" class="carousel slide" data-ride="carousel">
  50.                         <div class="carousel-inner">
  52.                             {% for image in images %}
  53.                                 <div class="carousel-item active ">
  54.                                     <img src="/uploads/{{ image.image }}" class="d-block w-100 mt-2" alt="test">
  55.                                     <button type="button" class="close bg-light p-1" data-dismiss="modal" aria-label="Close">
  56.                                         <span aria-hidden="true">&times;</span>
  57.                                     </button>
  58.                                     <img src="/uploads/{{ image.image2 }}" class="d-block w-100 mt-2" alt="test">
  59.                                     <button type="button" class="close bg-light p-1" data-dismiss="modal" aria-label="Close">
  60.                                         <span aria-hidden="true">&times;</span>
  61.                                     </button>
  62.                                     <img src="/uploads/{{ image.image3 }}" class="d-block w-100 mt-2" alt="test">
  63.                                     <button type="button" class="close  bg-light p-1" data-dismiss="modal" aria-label="Close">
  64.                                         <span aria-hidden="true">&times;</span>
  65.                                     </button>
  66.                                 </div>
  67.                             {% endfor %}
  68.                         </div>
  70.                     </div>
  71.                 </div>
  72.             </div>
  73.         </div>
  74.     </div>
  76. {% endblock %}