templates/galerie/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}{% endblock %}
  3. {% block stylesheets %}
  4.     <link rel="stylesheet" href="{{ asset('css/galerie.css') }}">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
  6.  
  7.     {% endblock %}
  8.     {% block body %}
  9.         {# <div class="section-gallery">
  10.                     <div class="container">
  11.                       <div class="row pb-5">
  12.                         <div class="col-md-12 text-center">
  13.                           <h5>Galerie </h5>
  14.                           <h2>Lorem ipsum dolor</h2>
  15.                         </div>
  16.                       </div>
  17.                       <input type="hidden" id="path-img" value="{{asset('imagees/galery/')}}"/>
  18.                       <div class="box">
  19.                         {% for gal in galerie %}
  20.                         <div class="dream" onclick="showImg('{{gal.image}}')" style="background-image : url('{{asset('imagees/galery/')}}{{gal.image}}')" id="dream-img">
  21.                         </div>
  22.                       {% endfor %}
  23.                       </div>
  24.                       <div id="myModal" class="modal">
  25.                         
  26.                         <div class="modal-content" id="img01" style="height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center;"></div>
  27.                         <span class="close">&times;</span>
  28.                       </div>
  29.                      
  30.                     </div>
  31.                   </div> #}
  32.                   <main class="section-services" style="z-index:-1">  </main>
  33.         <div class="section-galerie-album">
  34.             <div class="container-fluid">
  35.                 <div class="row">
  36.                     <div class="col-md-12 {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}" >
  37.                         <h5 class="text-center">{% trans  %} index_galerie.Galerie {% endtrans %}</h5>
  38.                         <h2 class="text-center">Lorem ipsum dolor</h2>
  39.                         <p id="text-galerie">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et sed diam voluptua. At vero eos et accusam et.</p>
  40.                     </div>
  41.                 </div>
  42.                 <div class="row formation-box" id="formationCard"> 
  43.                     {% for gal in galerie %}
  44.                         <div class="col-md-3 mt-4"> 
  45.                             <div class="card">
  46.                                  <main id="section-services" >  </main>
  47.                                 {% if gal.images | length %}
  48.                                     <div style="background-image : url('{{ asset('upload/galerie/images/') }}{{ gal.images[0].image }}'); height: 300px; max-height:230px; background-size: cover;background-repeat: no-repeat; border-radius: 15px 15px 0 0;    z-index: 1 !important;; background-position: center"></div>
  49.                                 {% else %}
  50.                                     <div style="background-image : url('{{ asset('upload/galerie/images/default_image.png') }}'); height: 300px; max-height:300px; background-size: cover;background-repeat: no-repeat; border-radius: 15px; background-position: center"></div>
  51.                                 {% endif %}
  52.                                 {# <img src="{{asset('upload/galerie/images/')}}{{gal.images[0].image }}" class="card-img-top" alt="..."> #}
  53.                                 <div class="card-body {{ app.request.locale == 'ar_TN' ? 'form_direction_rtl' : 'form_direction_ltr' }}"> 
  54.                                     <i class="fa-regular fa-clock"></i>
  55.                                     <span>{{ gal.date | date('d-m-y') }}</span>
  56.                                     <h6 class="card-title" style="text-align:initial !important;">{{ gal.titre }}</h6> 
  57.                                     <p class="card-text">{{ gal.description | u.truncate(40,'...') | striptags }}.   </p>
  60.                                         <div class="position-absolute bottom">
  62.                                             <div class="col-sm-12 text-right">
  63.                                                 <a href="{{ path('show_galerie_detail',{'id': gal.id}) }}" class="btn btn-primary"> {% trans  %} index_galerie.Voir Plus {% endtrans %} </a>
  64.                                             </div>
  65.                                         </div>
  66.                                     </div>
  67.                                 </div>
  68.                             </div>
  70.                         {% endfor %}
  71.                         <div class="navigation">
  72.                             {{ knp_pagination_render(galerie) }}
  73.                         </div>
  74.                     </div>
  75.                 </div>
  76.             </div>
  79.             <script>
  80.                 // Get the modal
  81.                 var modal = document.getElementById("myModal");
  83.                 // Get the image and insert it inside the modal - use its "alt" text as a caption
  84.                 var img = document.getElementById("dream-img");
  85.                 var modalImg = document.getElementById("img01");
  87.                 var pathImg = document.getElementById("path-img").value;
  88.                 {
  89.                     # img.onclick = function () {
  90.                         modal.style.display = "block";
  91.                         modalImg.style.backgroundImage = this.backgroundImage;
  92.                     }
  93.                     #
  94.                 }
  95.                 function showImg(img) {
  96.                     var img = pathImg + img;
  97.                     modalImg.style.backgroundImage = 'url(' + img + ')';
  98.                     modal.style.display = "block";
  99.                 }
  100.                 // Get the <span> element that closes the modal
  101.                 var span = document.getElementsByClassName("close")[0];
  103.                 // When the user clicks on <span> (x), close the modal
  104.                 span.onclick = function () {
  105.                     modal.style.display = "none";
  106.                 }
  107.             </script>
  108.         {% endblock %}