templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Hello HomeController!{% endblock %}
  4. {%  block stylesheets %}
  5.     <style>
  6.         .white-text-with-blue-shadow {
  7.             text-shadow: 1px 1px 2px black, 0 0 1em grey, 0 0 0.2em grey;
  8.             color: white!important;
  9.             font: 1.5em Georgia, serif;
  10.         }
  12.         .carousel{
  13.             max-height: 500px;
  14.         }
  16.         img{
  17.             object-fit: cover;
  18.             height: 500px;
  19.             width: auto;
  20.         }
  21.     </style>
  22. {% endblock %}
  23. {% block body %}
  25.     <div class="parallax mb-5 d-flex justify-content-center align-items-center">
  27.         <h1>Evènements</h1>
  28.     </div>
  29.     {% for key,evenement in evenements %}
  30.         {% if key is same as(0) %}
  31.             <div class="m-5 shadow-lg">
  32.                 <h1 class="text-center shadow-lg mx-auto px-0">{{ evenement.nom }}</h1>
  33.             </div>
  34.             <div class="m-5 shadow-lg p-5">
  35.                 {{ evenement.descriptifCourt|raw }}
  36.             </div>
  37.             <div id="carousel{{ evenement.id }}" class="carousel carousel-dark slide" data-bs-ride="carousel">
  38.                 <div class="carousel-indicators">
  39.                     <button type="button" data-bs-target="#carousel{{ evenement.id }}" data-bs-slide-to="0" class="active shadow-lg" aria-current="true" aria-label="Slide 1"></button>
  40.                     <button type="button" data-bs-target="#carousel{{ evenement.id }}" data-bs-slide-to="1" class="shadow-lg" aria-label="Slide 2"></button>
  41.                     <button type="button" data-bs-target="#carousel{{ evenement.id }}" data-bs-slide-to="2" class="shadow-lg" aria-label="Slide 3"></button>
  42.                 </div>
  43.                 <div class="carousel-inner">
  44.                     {% for key,image in evenement.images %}
  45.                         {% set active = "" %}
  46.                         {% if key is same as(0)  %}
  47.                             {% set active = "active" %}
  48.                         {% endif %}
  49.                         <div class="carousel-item {{ active }}">
  50.                             <img src="{{ asset('uploads/images/evenements/' ~ image.nom) }}" class="d-block w-50 mx-auto" alt="...">
  51.                             <div class="carousel-caption d-none d-md-block bg-white bg-opacity-50 white-text-with-blue-shadow">
  52.                                 <h5 class="">{{ evenement.nom }}</h5>
  53.                                 <p class="">Le {{ evenement.date|date('d/m/Y à H:i') }}</p>
  54. {#                                <a class="red-link" href="{{ path('app_evenement_show', {'id': evenement.id}) }}">Plus de détail</a>#}
  55.                             </div>
  56.                         </div>
  57.                     {% endfor %}
  58.                 </div>
  59.                 <button class="carousel-control-prev" type="button" data-bs-target="#carousel{{ evenement.id }}" data-bs-slide="prev">
  60.                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  61.                     <span class="visually-hidden">Previous</span>
  62.                 </button>
  63.                 <button class="carousel-control-next" type="button" data-bs-target="#carousel{{ evenement.id }}" data-bs-slide="next">
  64.                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  65.                     <span class="visually-hidden">Next</span>
  66.                 </button>
  67.             </div>
  68.         {% endif %}
  69.     {% endfor %}
  70. {% endblock %}