templates/actualite/view.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}CEP-I Actualité{% endblock %}
  5. {% block stylesheets %}
  6.   <link rel="shortcut icon" type="image/x-icon" href="/assets/images/favicon.ico">
  7.   <link rel="stylesheet" type="text/css" href="/assets/vendor/magnific-popup.css">
  8.   <link rel="stylesheet" type="text/css" href="/assets/vendor/slick-master/slick/slick.css">
  9.   <link rel="stylesheet" type="text/css" href="/assets/vendor/selectric/public/selectric.css">
  10.   <link rel="stylesheet" type="text/css" href="/assets/css/bundle.css">
  11.   <link rel="stylesheet" type="text/css" href="/assets/font-awesome/css/fontawesome-all.css">
  13.   <style>
  14.     .block_file img {
  15.       display: block;
  16.       margin: auto;
  17.       max-width: 100% !important;
  18.     }
  19.   </style>
  20.   <script src="/assets/vendor/jquery-3.1.1.min.js"></script>
  21. {% endblock %}
  23. {% block breadcrumps %}
  24.   <div class="breadcrumps">
  25.     <div class="shell">
  26.       <ul>
  27.         <li>
  28.           <a href="{{ path('accueil') }}">Accueil</a>
  29.         </li>
  31.         <li>
  32.           <a href="{{ path('actualites') }}">Actualités</a>
  33.         </li>
  35.         <li>
  36.           <a href="{{ path('actualite_view', {'title' : actualite.link}) }}">{{ actualite.title }}</a>
  37.         </li>
  38.       </ul>
  39.     </div><!-- /.shell -->
  40.   </div><!-- /.breadcrumps -->
  41. {% endblock %}
  43. {% block body %}
  45.   <section class="section-secondary section-secondary--def">
  46.     <div class="shell shell--alt">
  47.       <div class="section__body">
  48.         <a href="{{ path('actualites') }}" class="link link-back">
  49.                         <span class="ico-container">
  50.                             <i class="ico-arrow-back"></i>
  52.                             <i class="ico-arrow-back-green"></i>
  53.                         </span>
  55.           Retour Aux Actualités
  56.         </a>
  58.         <header class="section__head">
  59.           <h5>
  60.               {% set categories = actualite.category|split(',') %}
  61.               {% for cat in categories %}
  62.                 {{ util_service.articleCategorieVersLabel(cat) }}
  63.               {% endfor %}
  64.           </h5>
  66.           <h2>
  67.               {{ actualite.title ?? '' }}
  68.           </h2>
  70.           <h6>Le {{ actualite.publishDate|date('d/m/Y') }}</h6>
  72.           <div>
  73.               {{ actualite.description ? actualite.description|nl2br : '' }}
  74.           </div>
  76.         </header><!-- /.section__head -->
  78.         <div class="intro intro--small-alt">
  80.             {% if actualite.id is defined and actualite.image is defined and actualite.image is not null %}
  81.               <div class="intro__bg" style="background-image: url(
  82.               {{ '/assets/uploads/actualite/' ~ actualite.id ~ '/' ~ actualite.image }}
  83.                       );"></div>
  84.             {% endif %}
  85.         </div><!-- /.intro-small -->
  87.           {% for paragraphe in paragraphes %}
  88.               {% set mediaPosition = paragraphe.mediaPosition == 'Droite' ? 'float: right;' : 'float: left;' %}
  89.             <div class="section__content" id="{{ loop.index }}">
  90.               <h3>{{ paragraphe.title ?? null }}</h3>
  92.                 {% if paragraphe.image is defined and paragraphe.image is not null and paragraphe.image is not empty %}
  93.                   <figure class="figure-image" style="{{ mediaPosition }}">
  94.                     <img style="height: auto; max-height: 320px;"
  95.                          src="{{ '/assets/uploads/paragraphe/' ~ paragraphe.id ~ '/' ~ paragraphe.image }}" alt
  96.                     >
  97.                   </figure>
  98.                   <p>{{ paragraphe.content ? util_service.bbcodeToHtml(paragraphe.content|escape)|raw|nl2br : null }}</p>
  99.                   <div style="clear: both;"></div>
  100.                 {% elseif paragraphe.video is defined and paragraphe.video is not null and paragraphe.video is not empty %}
  101.                   <figure class="figure-video" style="{{ mediaPosition }}">
  102.                     <div class="video">
  103.                       <iframe src="{{ paragraphe.video|replace({'youtube.com/watch?v=' : 'youtube.com/embed/'}) }}"
  104.                               frameborder="0" allowfullscreen
  105.                       ></iframe>
  106.                     </div>
  107.                   </figure>
  108.                   <p>{{ paragraphe.content ? util_service.bbcodeToHtml(paragraphe.content|escape)|raw|nl2br : null }}</p>
  109.                   <div style="clear: both;"></div>
  110.                 {% else %}
  111.                   <p>{{ paragraphe.content ? util_service.bbcodeToHtml(paragraphe.content|escape)|raw|nl2br : null }}</p>
  112.                 {% endif %}
  113.                 {% if actualite.files %}
  114.                   {% set fic = actualite.files|split('/') %}
  115.                   {% set filePath = "/assets/uploads/actualite/" ~ actualite.id ~ "/" ~ actualite.files %}
  116.                   <div class="block_file" style="width: 250px;text-align: center; font-size: 45px">
  117.                     {{ previewFile(fic[fic|length - 1],filePath)|raw }}
  118.                   </div>
  119.                 {% endif %}
  120.             </div>
  121.           {% endfor %}
  123.       </div><!-- /.section__body -->
  124.     </div><!-- /.shell -->
  125.   </section><!-- /.section -->
  128.   <section class="section section--features section--features-def">
  129.     <div class="section__bg" style="background-image: url(/assets/images/temp/bg-1.jpg);"></div><!-- /.section__bg -->
  131.     <div class="shell">
  132.       <header class="section__head">
  133.         <h2 class="title">Les Autres Actualités</h2>
  134.       </header><!-- /.section__head -->
  136.       <div class="section__body">
  137.         <div class="features">
  139.           {% for autre in autres %}
  141.           <div class="feature feature--primary">
  142.             <a href="{{ path('actualite_view', {'title' : autre.link}) }}">
  144.               {% if autre.image is defined and autre.image is not null %}
  145.                 <div class="feature__image" style="background-image: url(
  146.                 {{ '/assets/uploads/actualite/' ~ autre.id ~ '/' ~ autre.image }}
  147.                         );"></div>
  148.               {% else %}
  149.                 <div class="feature__image" style="background-color: #A0C32E;"></div>
  150.               {% endif %}
  153.               <div class="feature__body">
  154.                 <h5>
  155.                     {% set categories = autre.category|split(',') %}
  156.                     {% for cat in categories %}
  157.                         {{ util_service.articleCategorieVersLabel(cat) }}
  158.                     {% endfor %}
  159.                 </h5>
  161.                 <p>
  162.                   {{ autre.title }}
  163.                 </p>
  164.               </div><!-- /.feature__body -->
  165.             </a>
  166.           </div><!-- /.feature -->
  168.           {% endfor %}
  169.         </div><!-- /.features -->
  170.       </div><!-- /.section__body -->
  171.     </div><!-- /.shell -->
  172.   </section><!-- /.section -->
  174.   {% include '__includes__/newsletterForm.html.twig' %}
  176.   <script>
  177.     let styleDynamicImage = function() {
  178.       let imageFigures = document.getElementsByClassName('figure-image');
  180.       for (let figure of imageFigures) {
  181.         let img = figure.getElementsByTagName('img')[0];
  183.         if (img.naturalHeight > img.naturalWidth) {
  184.           figure.style.maxWidth = 'none';
  185.           img.style.maxHeight = '320px';
  186.         }
  187.       }
  188.     };
  190.     // window.onload = styleDynamicImage;
  193.   </script>
  195. {% endblock %}
  197. {% block javascripts %}
  198.   <script src="/assets/vendor/magnific-popup.js"></script>
  199.   <script src="/assets/vendor/slick-master/slick/slick.min.js"></script>
  200.   <script src="/assets/vendor/selectric/public/jquery.selectric.min.js"></script>
  201.   <script src="/assets/vendor/jquery-scrollLock.min.js"></script>
  202.   <script src="/assets/vendor/validator.js"></script>
  203.   <script src="/assets/js/bundle.js"></script>
  204. {% endblock %}