templates/Default/article.html.twig line 1

Open in your IDE?
  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' %}
  10. {% block titlebox %}
  11. <div class='relative white {{desktop("vt-40-in")}} {{mobile("")}}'>
  12.     {% block title %}
  13.     <h1 class='h3 upper lh-1 text-center'>{{title is defined ? title}}</h1>
  14.     {% endblock title %}
  15. </div>
  16. {% endblock titlebox %}
  18. {% block content %}
  19. <div class='{{desktop("gpadding vt-40-in")}} {{mobile("gpadding vt-30-in")}} '>
  20.     <div class='{{desktop("gpadding flex row center top")}} {{mobile("")}}'>
  21.         <div id='article' class='w100 {{desktop("")}} {{mobile("vt-20-in")}}'>
  22.             <figure class="w100 {{desktop('')}}">
  23.                 <img src="{{asset(article.banner)}}" class="block w100"/>
  24.             </figure>
  25.             <article  class='p article black {{desktop("top-30")}}'>
  26.             {{ article.content|raw }}
  27.             </article>
  29.             {% if article.biblio and article.biblio.files|length %}
  30.             <h2 class='h3 adapt top-40 adapt'>Document(s) joint(s)</h2>
  31.             <div class='flex row space wrap {{desktop("top-40")}}{{mobile("top-20")}}'>
  32.                 {% for o in article.biblio.files %}
  33.                 <div class='doc flex row top {{desktop("half-20")}} relative bg-black bottom-20 hz-25-in vt-20-in hoverflow {{desktop("")}} {{mobile("")}}'>
  34.                     {% set doc = o %}
  35.                     <span class="">
  36.                         <i class="fa fa-file gray fa-3x"></i>
  37.                     </span>
  38.                     <div class='text-left flex col space relative left-20 right-40-in'>
  39.                         <h3 class='h6 medium white p text-left nomargin lh-1x'>{{doc.name ? doc.name : doc.source}}</h3>
  40.                         <div class="flex col middle space top-10">
  41.                             <div class='gray text-left p-alt'>
  42.                                 <span class=''>{{doc.formatSize}}</span> |
  43.                                 <span class=''>{{doc.reading|number_format}} lect.</span> |
  44.                                 <span>{{doc.downloads|number_format}} téléch.</span>
  45.                             </div>
  46.                             <div class='flex row middle p upper medium top-20 nowrap'>
  47.                                 <i class="w100 top-2-in bg-gray right-40"></i>
  48.                                 <span class='os-read white' data-url="{{url('file-read',{id:doc.id,name:doc.name ? doc.name|slug : doc.source|slug})}}">Lire</span>
  49.                                 <a class='left-30 warning' href="{{path('file-download',{id:doc.id,name:doc.name ? doc.name|slug : doc.source|slug})}}" target='_blank' download>Télécharger</a>
  50.                             </div>
  51.                         </div>
  52.                     </div>
  53.                     <i class="triangle gradient-bannerm bg-white"></i>
  54.                 </div>
  55.                 {% endfor %}
  56.             </div>
  57.             {% endif %}
  59.             {% if article.youtube %}
  60.             <h2 class='h3 adapt top-40 adapt'>Suivez la vidéo</h2>
  61.             <div class='bg-gray w100'>
  62.                 <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>
  63.             </div>
  64.             {% endif %}
  66.             {% if article.album and article.album.pictures|length %}
  67.             <h2 class='h3 top-40'>{{article.album.title ? article.album.title : "Album photos"}}</h2>
  68.             <figure class="bg-white slide-box mrect slide-container fill nohover relative top-40" tabindex="1">
  69.                 <div class="fill slides radius-10 adapt">
  70.                 {% for o in article.album.pictures %}
  71.                 <div class='relative slide {{loop.index == 1 ? "active"}}'>
  72.                     <img src='{{asset(o)}}' class='contain'/>
  73.                 </div>
  74.                 {% endfor %}
  75.                 </div>
  76.                 <span class="slide-prev radius-50 h100 padding-30 absolute top left pointer" data-target="#article .slide-box">
  77.                     <span class="fill flex col middle"><i class="flex col middle fa fa-chevron-left h1 black"></i></span>
  78.                 </span>
  79.                 <span class="slide-next radius-50 h100 padding-30 absolute top right pointer"  data-target="#article .slide-box">
  80.                     <span class="fill flex col middle"><i class="flex col middle fa fa-chevron-right h1 black"></i></span>
  81.                 </span>
  82.             </figure>
  83.             {% endif %}
  85.             {% if article.flickr %}
  86.             <h2 class='h3 adapt top-40 adapt'>Album photos</h2>
  87.             <div class='bg-gray w100'>
  88.                 <iframe class='block-center w100 flickr-frame' src='{{article.flickr|replace({"albums":"sets"})}}/player' scrolling='no' align='middle' frameborder='0'></iframe>
  89.             </div>
  90.             {% endif %}
  91.         </div>
  92.     </div>
  93. </div>
  94. {% endblock %}