templates/FrontBundle/Page/actualites.html.twig line 1

Open in your IDE?
  1. {% extends 'FrontBundle/layout.html.twig' %}
  3. {% block title %}{{ app_sitename }} - {{ page.metaTitle }}{% endblock %}
  4. {% block description %}{{ page.metaDescription }}{% endblock %}
  8. {% block extra_class %}native{% endblock %}
  9. {% block menu_min %}969{% endblock %}
  10. {% block menu_max %}2624{% endblock %}
  12. {% block stylesheets %}
  13.     <link href="/front/css/owl.carousel.min.css" rel="stylesheet">
  14.     <link href="/front/css/owl.theme.default.min.css" rel="stylesheet">
  15. {% endblock %}
  16. {% block json_ld %}
  17.     <script type="application/ld+json">
  18.         {
  19.           "@context": "https://schema.org",
  20.           "@type": "WebPage",
  21.           "name": "{{ page.metaTitle | escape('js') }}",
  22.           "description": "{{ page.metaDescription | escape('js') }}",
  23.           "thumbnailUrl": "{{ asset ('/front/img/actu-bg.jpg') }}"
  24.          }
  25.     </script>
  26. {% endblock %}
  27. {% block body %}
  30.     <section class="actu-header" style="background-image: url('/front/img/actu-bg.jpg');">
  31.         <div class="content">
  32.           <h1>{{ 'actu_title'|tr(tr)|upper|raw }}</h1>
  33.           <p>{{ 'actu_subtitle'|tr(tr)|raw }}</p>
  34.         </div>
  35.     </section>
  37.     <section class="actu-header-content">
  38.         <div class="content">
  39.             <div class="row">
  40.                 <div class="col-md-6">
  41.                         <div class="owl-carousel">
  42.                         {% for post in posts %}
  43.                             {% if post.slider %}
  44.                                  <div class="item" style="background-image: url('/uploads/posts/{{post.id}}/{{post.getMainImage}}');" href="/{{app.request.locale }}/actualite/{{post.slug}}">
  45.                                      <div class="gradient">
  46.                                          <a href="/{{app.request.locale }}/actualite/{{post.slug}}" class="title mb-2">{{post.metaTitle}}</a>
  47.                                          <span class="preview mb-5">{{post.metaDescription}}</span>
  48.                                          <span class="date">{{post.dateStr(app.request.locale)}}</span>
  49.                                          <span class="time">{{post.timeRead(app.request.locale)}}</span>
  50.                                          <span class="author">RP</span>
  51.                                      </div>
  52.                                  </div>
  53.                             {% endif %}
  54.                         {% endfor %}
  55.                         </div>
  56.                     </div>
  57.                     <div class="col-md-6 pinned">
  58.             {% set counter = 1 %}
  59.                         {% for post in posts %}
  60.                             {% if post.pinned and counter < 3 %}
  61.                                 <div class="post">
  62.                                      <div class="img" style="background-image: url('/uploads/posts/{{post.id}}/{{post.getMainImage}}');" href="/{{app.request.locale }}/actualite/{{post.slug}}"></div>
  63.                                  
  64.                                          <a href="/{{app.request.locale }}/actualite/{{post.slug}}" class="title mb-2">{{post.metaTitle}}</a>
  65.                                          <span class="preview mb-5">{{post.metaDescription}}</span>
  66.                                      <div class="desc">
  67.                                          <span class="date">{{post.dateStr(app.request.locale)}}</span>
  68.                                          <span class="time">{{post.timeRead(app.request.locale)}}</span>
  69.                                          <span class="author">RP</span>
  70.                                      </div>
  71.                               </div>
  72.                 {% set counter = counter + 1 %}
  73.                
  74.                             {% endif %}
  75.                         {% endfor %}
  76.                     </div>
  77.                 </div>
  78.             </div>
  80.             <a href="#a-la-une" class="next-arrow mb-0"><img src="/front/img/espaces-arrow-bk-l.svg" alt="suivant" /></a>
  81.         </section>
  83.     <section class="actu-content featured pt-5 mt-5" id="a-la-une">
  84.         <div class="content">
  85.                 <h2 id="">{{ 'actu_title2'|tr(tr)|upper|raw }}</h2>
  86.             </div>
  88.             <div class="slider">
  89.                 <div class="owl-carousel">
  90.                     {% for post in posts %}
  91.                         {% if post.featured %}
  92.                             <div class="item">
  93.                                     <a href="/{{app.request.locale }}/actualite/{{post.slug}}">
  94.                                          <div class="img" style="background-image: url('/uploads/posts/{{post.id}}/{{post.getMainImage}}');" href="/{{app.request.locale }}/actualite/{{post.slug}}"></div>
  95.                                      </a>
  96.                                   <div class="desc">
  97.                                       <span class="date">{{post.dateStr(app.request.locale)}}</span>
  98.                                       <span class="time">{{post.timeRead(app.request.locale)}}</span>
  99.                                       <span class="author">RP</span>
  100.                                   </div>
  102.                                     <a href="/{{app.request.locale }}/actualite/{{post.slug}}" class="title">{{post.metaTitle}}</a>
  104.                             </div>
  106.                         {% endif %}
  107.                     {% endfor %}
  108.                 </div>
  109.             </div>
  111.         </section>
  113.         <section class="actu-content news">
  114.             <div class="content mt-5 pt-5">
  115.                 <h2 class="mb-5  no-bar">{{ 'actu_title3'|tr(tr)|upper|raw }}<span class="full-bar"></span></h2>
  116.                     <div class="pt-5">
  117.                     {% for post in posts %}
  119.                         <div class="post mt-5 row {{ (loop.index > 3) ? 'hidden' : '' }}">
  120.                             <div class="col-md-3">
  121.                                 <div class="img" style="background-image: url('/uploads/posts/{{post.id}}/{{post.getMainImage}}');" href="/{{app.request.locale }}/actualite/{{post.slug}}"></div>
  122.                             </div>
  123.                             <div class="col-md-9">
  125.                                 <a href="/{{app.request.locale }}/actualite/{{post.slug}}" class="title">{{post.metaTitle}}</a>
  126.                                 <span class="preview">{{ post.contentPreview|raw }}</span>
  127.                                 <div class="desc">
  128.                                   <span class="date">{{post.dateStr(app.request.locale)}}</span>
  129.                                   <span class="time">{{post.timeRead(app.request.locale)}}</span>
  130.                                   <span class="author">RP</span>
  131.                                 </div>
  133.                             </div>
  134.                         </div>
  136.                     {% endfor %}
  137.                     </div>
  139.                     <a href="#" class="mt-5 load">{{ 'actu_load'|tr(tr)|raw }}</a>
  142.             </div>
  143.         </section>
  146.         <section class="actu-content newsletter" style="margin-bottom: 180px;">
  147.             <div class="content mt-5 pt-5">
  148.                 <h2 class="mb-5 no-bar">{{ 'newsletter_title'|tr(tr)|upper|raw }}<span class="full-bar"></span></h2>
  149.                 <div class="pt-5">
  150.                     <form>
  151.                         <p class="title">{{ 'newsletter_subtitle'|tr(tr)|raw }}</p>
  152.                         <p class="desc">{{ 'newsletter_desc'|tr(tr)|raw }}</p>
  153.                         <div class="email-input">
  154.                             <input type="text" value="" placeholder="{{ 'newsletter_email'|tr(tr)|raw }}" class="email mt-3" />
  155.                             <a href="#" class="register">&nbsp;</a>
  156.                         </div>
  157.                         <div class="row">
  158.                             <div class="col-12 mt-4">
  159.                               <input type="checkbox" id="confirm" class="apple-switch" checked="checked" />
  160.                                 <label for="confirm">{{ 'newsletter_agree'|tr(tr)|raw }}</label>
  161.                 <p class="text-center mt-4" id="message_newsletter"></p>
  162.                             </div>
  163.                         </div>
  164.                     </form>
  165.                 </div>
  167.             </div>
  168.         </section>
  170.         {% include 'FrontBundle/Partial/footer.html.twig' %}
  172. {% endblock %}
  174. {% block javascripts %}
  176.   <script src="/front/js/owl.carousel.min.js"></script>
  178.   <script type="text/javascript">
  180.     $( document ).ready(function() {
  181.       $('.actu-header-content .item').on('click', function(){
  182.           window.location.href = $(this).attr('href');
  183.       });
  184.       $('.actu-content.featured .img').on('click', function(){
  185.           window.location.href = $(this).attr('href');
  186.       });
  187.       $('.actu-header-content .pinned .img').on('click', function(){
  188.           window.location.href = $(this).attr('href');
  189.       });
  190.       $('.actu-content.news .img').on('click', function(){
  191.           window.location.href = $(this).attr('href');
  192.       });
  193.       $('.actu-content.news a.load').on('click', function(e){
  194.           e.preventDefault();
  195.           $('.actu-content.news .hidden').css("display", "flex").hide().fadeIn();
  196.           $(this).fadeOut();
  197.       });
  198.       $('.actu-content.newsletter .register').on('click', function(e){
  199.           e.preventDefault();
  200.           console.log('register')
  201.       });
  202.     });
  204.         $('.actu-header-content .owl-carousel').owlCarousel({
  205.         loop:true,
  206.         margin:0,
  207.         nav:false,
  208.         dots:true,
  209.         autoplay:true,
  210.         responsive:{
  211.             0:{
  212.                 items:1
  213.             },
  214.             600:{
  215.                 items:1
  216.             },
  217.             1920:{
  218.                 items:1
  219.             }
  220.         }
  221.         });
  225.         $('.actu-content.featured .owl-carousel').owlCarousel({
  226.         loop:false,
  227.         margin:95,
  228.         nav:true,
  229.         dots:false,
  230.         responsive:{
  231.             0:{
  232.                 items:1
  233.             },
  234.             768:{
  235.                 items:2
  236.             },
  237.             1920:{
  238.                 items:3
  239.             }
  240.         }
  241.         });
  244.     </script>
  247. {% endblock %}