templates/Default/article.html.twig line 28

  1. {% set title = article.title %}
  2. {% set desc = article.description %}
  3. {% set menu = 'articles' %}
  4. {% if article.banner %}
  5. {% set thumbnail = article.banner.thumbnail %}
  6. {% set banner = asset(article.banner.file) %}
  7. {% endif %}
  8. {% extends 'Default/base.html.twig' %}
  9. {% import "Default/macros.html.twig" as macros %}
  11. {% block banner %}
  12.     <div id="banner-article" class=" w100 htop-in {{desktop('gpadding top-80')}} {{mobile('hz-20-in top-20-in bottom-30')}}">
  13.         <div class="flex row w100 {{desktop('bottom-80-in')}} {{mobile('bottom-30-in')}}">
  14.             <div class="{{desktop('')}} {{mobile('')}}" >
  15.                 <figure class="relative w100 hoverflow mrect {{desktop('')}} {{mobile('')}}" >
  16.                     <img src='{{asset(article.banner ? article.banner.file : "images/armoiries.jpg")}}' class="cover">
  17.                 </figure>
  18.                 <div class="flex row space">
  19.                     <i class="third"></i>
  20.                     <div class="w100 right bg-success top-10-in {{desktop("")}} {{mobile("")}}"><span class="top-2-in {{desktop("")}} {{mobile("")}}"></span></div>
  21.                 </div>
  22.             </div>
  23.             <div class="w100 {{desktop('top-40-in left-70 left-2-in')}} {{mobile('')}}">
  24.                 <div class="{{desktop('bottom-50 bottom-2-in')}} {{mobile('bottom-20-in')}}">
  25.                     <div class="flex row middle {{desktop('bottom-25')}} {{mobile('bottom-15')}}">
  26.                         <div class="p-alt flex row middle upper {{desktop('right-30 right-5-in')}} {{mobile('right-20')}}">
  27.                             <i class="circle bg-warning {{desktop('padding-4 right-10')}}{{mobile('padding-3 right-5')}}"></i>
  28.                             <time class="warning">{{article.date ? article.date|frdate}}</time>
  29.                         </div>
  30.                         <div class="p-alt flex row middle ">
  31.                             <i class="circle bg-warning {{desktop('padding-4 right-10')}}{{mobile('padding-3 right-5')}}"></i>
  32.                             <span class="upper warning">{{article.category.name}}</span>
  33.                         </div>
  34.                     </div>
  35.                     <h3 class="success bold flex row {{desktop('h2 lh-10x bottom-15 right-40-in')}} {{mobile('lh-5x bottom-8')}}">
  36.                         {{article.title}}
  37.                     </h3>
  38.                 </div>
  39.                 <div class="flex row w100">
  40.                     <a href="{{url('articles')}}" class='border border-success flex row middle extrabold {{desktop("padding-30")}} {{mobile("padding-15")}}'>
  41.                         <span class='{{desktop("padding-6")}} {{mobile("")}}'>
  42.                             <i class="fa fa-arrow-left success right-10"></i>
  43.                             <span class='p success upper '>Retour vers les publications</span>
  44.                         </span>
  45.                     </a>
  46.                     <a href="" class='bg-success flex row middle extrabold {{desktop("left-20 padding-30")}} {{mobile("padding-15")}}'>
  47.                         <span class='{{desktop("padding-6")}} {{mobile("")}}'>
  48.                             <i class="fa fa-external-link white right-10"></i>
  49.                             <span class='p white upper '>Partager</span>
  50.                         </span>
  51.                     </a>
  52.                 </div>
  53.             </div>
  54.         </div>
  55.         <div class="w100 bg-gray top-1-in {{desktop('')}}"></div>
  56.     </div>
  57. {% endblock banner %}
  59. {% block content %}
  60. <div class='{{desktop("gpadding bottom-80 bottom-80-in ")}} {{mobile("hz-20-in vt-30-in")}} '>
  61.     <div class='{{desktop("flex row space top bottom-6")}} {{mobile("")}}'>
  62.         <div id='article' class='w100 {{desktop("border noborder border-1x border-right border-gray right-60-in")}} {{mobile("vt-20-in")}}'>
  63.             <div class="w100 {{desktop('top-80')}} {{mobile('top-30-in')}}"></div>
  64.             {%if article.description|nl2br %}
  65.             <article  class='h4 article success semibold bg-gray-alt padding-20 {{desktop("top-30")}} {{mobile("top-10")}}'>
  66.             {{ article.description|nl2br }} 
  67.             </article>
  68.             {%endif%}
  69.             <article  class='h4 article black {{desktop("top-30")}} {{mobile("top-10")}}'>
  70.             {{ article.content|raw }}
  71.             </article>
  73.             {% if article.biblio and article.biblio.files|length %}
  74.             <h2 class='h3 adapt top-40 adapt'>Document(s) joint(s)</h2>
  75.             <div class='flex row space wrap bg-success {{desktop("top-40")}}{{mobile("top-20")}}'>
  76.                 {% for o in article.biblio.files %}
  77.                 <div class='doc flex row top {{desktop("half-20")}} relative gradient-banner bottom-20 hz-25-in vt-20-in hoverflow {{desktop("")}} {{mobile("")}}'>
  78.                     {% set doc = o %}
  79.                     <span class="">
  80.                         <i class="fa fa-file gray fa-3x"></i>
  81.                     </span>
  82.                     <div class='text-left flex col space relative left-20 right-40-in'>
  83.                         <h3 class='h6 medium white p text-left nomargin lh-1x'>{{doc.name ? doc.name : doc.source}}</h3>
  84.                         <div class="flex col middle space top-10">
  85.                             <div class='gray text-left p-alt'>
  86.                                 <span class=''>{{doc.formatSize}}</span> |
  87.                                 <span class=''>{{doc.reading|number_format}} lect.</span> |
  88.                                 <span>{{doc.downloads|number_format}} téléch.</span>
  89.                             </div>
  90.                             <div class='flex row middle p upper medium top-20 nowrap'>
  91.                                 <i class="w100 top-2-in bg-gray right-40"></i>
  92.                                 <span class='os-read warning-alt' data-target="{{path('file-read',{id:doc.id})}}">Lire</span>
  93.                                 <a class='left-30 warning-alt' href="{{path('file-download',{id:doc.id})}}" target='_blank' download>Télécharger</a>
  94.                             </div>
  95.                         </div>
  96.                     </div>
  97.                     <i class="triangle gradient-bannerm bg-white"></i>
  98.                 </div>
  99.                 {% endfor %}
  100.             </div>
  101.             {% endif %}
  103.             {% if article.youtube %}
  104.             <h2 class='h3 adapt top-40 adapt'>Suivez la vidéo</h2>
  105.             <div class='bg-gray w100'>
  106.                 <iframe class='block block-center w100 youtube-frame' src='{{article.youtube|youtubeId|youtubeEmbed}}' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
  107.             </div>
  108.             {% endif %}
  110.             {% if article.album and article.album.pictures|length %}
  111.             <h2 class='h3 top-40'>{{article.album.title ? article.album.title : "Album photos"}}</h2>
  112.             <figure class="bg-white slide-box mrect slide-container fill nohover relative top-40 shadow-alt" tabindex="1">
  113.                 <div class="fill slides radius-10 adapt">
  114.                 {% for o in article.album.pictures %}
  115.                 <div class='relative slide {{loop.index == 1 ? "active"}}'>
  116.                     <img src='{{asset(o)}}' class='contain'/>
  117.                 </div>
  118.                 {% endfor %}
  119.                 </div>
  120.                 <span class="slide-prev radius-50 h100 padding-30 absolute top left pointer" data-target="#article .slide-box">
  121.                     <span class="fill flex col middle"><i class="flex col middle fa fa-chevron-left h1 black"></i></span>
  122.                 </span>
  123.                 <span class="slide-next radius-50 h100 padding-30 absolute top right pointer"  data-target="#article .slide-box">
  124.                     <span class="fill flex col middle"><i class="flex col middle fa fa-chevron-right h1 black"></i></span>
  125.                 </span>
  126.             </figure>
  127.             {% endif %}
  129.             {% if article.flickr %}
  130.             <h2 class='h3 adapt top-40 adapt'>Album photos</h2>
  131.             <div class='bg-gray w100'>
  132.                 <iframe class='block-center w100 flickr-frame' src='{{article.flickr|replace({"albums":"sets"})}}/player' scrolling='no' align='middle' frameborder='0'></iframe>
  133.             </div>
  134.             {% endif %}
  135.         </div>
  136.         <aside class="bg-gray-alt {{desktop('third-60 left-60 vt-20-in hz-20-in')}} {{mobile(' vt-20-in hz-15-in')}}">
  137.             <h2 class="h2 aquawax light success {{desktop(' vt-20-in')}} {{mobile('vt-15')}}">Autres articles similaires</h2>
  138.             {% for o in list %}
  139.            {# <div class="w100 {{desktop(' vt-20-in')}} {{mobile('vt-15')}}">
  140.                 <figure class="w100 flex row top">
  141.                     <img src="{{asset(o.banner ? o.banner.thumbnail : 'images/logo.svg')}}" class="block third {{desktop(o.banner ? '' : 'hz-25-in')}}">
  142.                     <div class="flex col {{desktop('left-15')}} {{mobile('left-10')}}">
  144.                         <h3 class="p-alt white regular">{{o.title}}</h3>
  145.                         <div class="flex row middle top-10">
  146.                             <i class="fa fa-eye warning-alt left-10"></i>
  147.                             <a class='p-alt lspacing upper medium warning-alt {{desktop("left-10")}} {{mobile("left-5")}}'
  148.                                 href='{{path("article",{id:o.id, slug:o.slug})}}'>
  149.                                 Lire l'article
  150.                             </a>
  151.                         </div>
  152.                     </div>
  154.                 </figure>
  155.             </div>#}
  156.             {% endfor %}
  157.         </aside>
  158.     </div>
  159. </div>
  160. {% endblock %}