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