templates/accueil/accueil.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Le Bio d'Elo{% endblock %}
  4. {% block stylesheets %} <link rel="stylesheet" href="{{  asset('css/accueil.css')  }}">{% endblock %}
  6. {% block content %}
  9.     <div class="wrapper col-12">
  10.     <div class="accueil">
  11.         <meta itemprop="url" content="https://www.lebiodelo.com{{ app.request.getPathInfo }}">
  12.         <video class="background d-none video"  src ="" autoplay loop muted type="video/mp4"></video>
  14.         <img class ='background image d-none ' src="" alt="image accueil">
  16.         
  17.         
  18.        <p class="text-accueil d-none  accueil-lg col-8 mx-auto">
  20.           {{ textLg }}
  21.         </p>
  22.         <p class="text-accueil  d-none accueil-md  col-8 mx-auto">
  24.           {{ textMd }}
  25.         </p>
  27.         </div>
  29.        
  31.  
  34.     </div>
  35. <div class="groupe mb-5">
  36.  <div   class="col-12 bandeau mx-auto d-flex justify-content-center align-items-center">A LA UNE AUJOURD'HUI
  37.         </div>
  42.     <div  itemscope itemtype="https://schema.org/Product" class="focusProduit">
  44.         {% if produitsShowcase %}
  46.             {% set nbShowcase = 0 %}
  47.             {% for produit in produitsShowcase  %}
  48.                     {% set nbShowcase = nbShowcase + 1 %}
  50.                     {% if nbShowcase % 2 %}
  52.                         <div class="col-12 d-flex flex-md-row flex-column pb-lg-5  pb-0 ">
  54.                                     <div class="col-md-4 col-12  d-flex flex-column justify-content-center align-items-center photo mx-auto mt-md-3 mt-0"> 
  55.                                             <img itemprop="image" src="{{ asset("img/photoProduitUpload/" ~  produit.getPhotoProduits.first() ) }}" alt="image du produit" style="width:50%"> 
  56.                                                <div class="nomProduit my-2" itemprop="name">{{ produit.nom|upper  }}</div>
  57.                                       
  58.                                     </div>
  60.                                    <div class="Produit col-md-6  col-10  d-flex flex-column justify-content-center align-items-center mx-auto px-2">
  61.                                         {# <p class= "nomProduit mb-1">{{ produit.nom|upper }}</p> #}
  62.                                       
  63.                                         <div hidden itemprop="offer">{{ produit.prixPubTtc }}</div>
  64.                                         <div itemprop="description" class= "description">{{ produit.description|raw}}</div>
  65.                                         <a class="btn col-6" href="{{ path('fiche_produit', {'id' : produit.id}) }}">Découvrir  </a>
  66.                                        
  67.                                    </div>
  68.                                    
  69.                         </div>
  71.                      {% else %}
  72.                       
  74.                         <div class=" col-12  d-flex flex-md-row flex-column  pb-lg-5  pb-0" >
  77.                                 <div class="col-md-6 col-10 d-flex flex-column justify-content-center align-items-center  order-md-1 order-2 mx-auto px-2 mt-md-0 mt-3 mb-3">
  78.                                  
  79.                                     <div hidden itemprop="offer">{{ produit.prixPubTtc  }}</div>
  80.                                     <div itemprop="description" class= "description">{{ produit.description|raw}}</div>
  81.                                      <a class="btn col-6" href="{{ path('fiche_produit', {'id' : produit.id}) }}">Découvrir  </a>
  82.                                    
  84.                                  </div>
  85.                                    
  86.                             
  87.                                   <div class="col-md-4 col-12 d-flex flex-column justify-content-center align-items-center  photo order-md-2 order-1 mx-auto">
  89.                                         
  90.                                    
  91.                                         <img itemprop= "image" src="{{ asset("img/photoProduitUpload/" ~  produit.getPhotoProduits.first() ) }}" alt="image du produit" style="width:50%" class="mx-auto"> 
  92.                                         <div class="nomProduit my-2" itemprop="name">{{ produit.nom|upper  }}</div>
  93.                                         
  94.                                         
  95.                                 </div>
  96.                                 
  97.                             
  98.                         </div>
  99.                     {% endif %}
  100.                
  101.             {% endfor %}
  103.         {% endif %}
  104.     
  105.         </div>
  106.  </div>
  109. {% endblock %}
  111. {% block javascripts %}
  113. <script>
  116. let homeBackground = function(){
  117.     let typeLg = "{{typeLg}}"
  118.     let fileLg ="{{fileLg}}"
  119.     let typeMd = "{{typeMd}}"
  120.     let fileMd ="{{fileMd}}"
  121.     let chemin = "{{asset('img/accueil/')}}"
  122.     elementVideo = document.querySelector('.video')
  123.     elementTextLg = document.querySelector('.accueil-lg')
  124.     elementTextMd = document.querySelector('.accueil-md')
  125.     elementImage = document.querySelector('.image')
  127.     if (window.matchMedia("(min-width:992px)").matches) { // superieur au  mode md
  128.             if (typeLg) { //si  c'est une video 
  129.             elementVideo.src = chemin+fileLg
  130.             elementImage.classList.add('d-none')
  131.             elementVideo.classList.remove('d-none')
  132.             } 
  133.             else { //si c'est une image
  134.             elementVideo.classList.add('d-none')
  135.             elementImage.classList.remove('d-none')
  136.             elementTextLg.classList.remove('d-none')
  137.              elementTextMd.classList.add('d-none')
  138.             elementImage.src = chemin+fileLg
  139.             }
  140.     
  141.     } else { // si c'est une tablette ou un smartphone  
  142.             if (typeMd) { //si  c'est une video 
  143.             elementVideo.src = chemin+fileMd
  144.             elementImage.classList.add('d-none')
  145.             elementVideo.classList.remove('d-none')
  146.             } 
  147.             else { //si c'est une image
  148.             elementVideo.classList.add('d-none')
  149.             elementImage.classList.remove('d-none')
  150.              elementTextLg.classList.add('d-none')
  151.             elementTextMd.classList.remove('d-none')
  152.             elementImage.src = chemin+fileMd
  153.             }
  154.     }
  156. }
  158. homeBackground()
  159. window.onresize =function() {
  160.     return  homeBackground()
  161. }
  164. </script>
  167. {% endblock %}