mediatheque
This commit is contained in:
armansansd
Executable
+278
@@ -0,0 +1,278 @@
|
||||
{% extends 'partials/base.html.twig' %}
|
||||
|
||||
{% block content %}
|
||||
{% set t = grav.uri.param('title') %}
|
||||
{% set type = grav.uri.param('type') %}
|
||||
|
||||
|
||||
{% include 'partials/head.html.twig' %}
|
||||
<div class="columns medium-12 medium-offset-0 small-11 small-offset-1 ss_menu">
|
||||
<div class="row">
|
||||
<div class="doc_b">
|
||||
{% if type and type =="doc"%}
|
||||
{% set c = "select" %}
|
||||
{% else %}
|
||||
{% set c = " " %}
|
||||
{% endif %}
|
||||
<a class="selectable {{c}}" data-type="doc" >Documents</a>
|
||||
</div>
|
||||
<div class="doc_b">
|
||||
{% if type and type == "video"%}
|
||||
{% set c = "select" %}
|
||||
{% else %}
|
||||
{% set c = " " %}
|
||||
{% endif %}
|
||||
{% if lang == "fr" %}
|
||||
<a class="selectable {{c}}" data-type="video" >Vidéos</a>
|
||||
{% else %}
|
||||
<a class="selectable {{c}}" data-type="video" >Videos</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="doc_b">
|
||||
{% if type and type =="images"%}
|
||||
{% set c = "select" %}
|
||||
{% else %}
|
||||
{% set c = " " %}
|
||||
{% endif %}
|
||||
|
||||
{% if lang == "fr" %}
|
||||
<a class="selectable {{c}}" data-type="images" >Photos</a>
|
||||
{% else %}
|
||||
<a class="selectable {{c}}" data-type="images" >Pictures</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="doc_b">
|
||||
{% if type and type =="pod"%}
|
||||
{% set c = "select" %}
|
||||
{% else %}
|
||||
{% set c = " " %}
|
||||
{% endif %}
|
||||
|
||||
{% if lang == "fr" %}
|
||||
<a class="selectable {{c}}" data-type="pod" >Podcasts</a>
|
||||
{% else %}
|
||||
<a class="selectable {{c}}" data-type="pod" >Podcasts</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="doc_b">
|
||||
{% if type and type =="newsletter"%}
|
||||
{% set c = "select" %}
|
||||
{% else %}
|
||||
{% set c = " " %}
|
||||
{% endif %}
|
||||
|
||||
{% if lang == "fr" %}
|
||||
<a class="selectable {{c}}" data-type="newsletter" >Newsletter</a>
|
||||
{% else %}
|
||||
<a class="selectable {{c}}" data-type="newsletter" >Newsletter</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="doc_b">
|
||||
{% if type and type =="media"%}
|
||||
{% set c = "select" %}
|
||||
{% else %}
|
||||
{% set c = " " %}
|
||||
{% endif %}
|
||||
|
||||
{% if lang == "fr" %}
|
||||
<a class="selectable {{c}}" data-type="media" >TLP dans les médias</a>
|
||||
{% else %}
|
||||
<a class="selectable {{c}}" data-type="media" >TLP in the media</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
|
||||
<div class="columns medium-12 small-11 doc type">
|
||||
|
||||
{% if lang == "fr" %}
|
||||
{% set arr = {
|
||||
rapports : "Rapports de recherche",
|
||||
admin : "Rapports d’activités et administratifs",
|
||||
digital : "Outils numériques",
|
||||
com: "Communiqués et tribunes"
|
||||
} %}
|
||||
{% else %}
|
||||
{% set arr = {
|
||||
rapports : "Research reports",
|
||||
admin : "Activity and administrative reports",
|
||||
digital : "Digital tools",
|
||||
com: "Press releases and tribunes",
|
||||
} %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
<div class="row">
|
||||
{% for key,section in arr %}
|
||||
<div class="menu_selector column small-12" >
|
||||
<a class="selector" data-section="{{key}}" onclick="displaysection(this)">{{section}}</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% for key,section in arr %}
|
||||
<div class="section column small-12" >
|
||||
<div data-type="{{key}}" class="row">
|
||||
{% for item in page.header.doc %}
|
||||
{% if item.docTag[0] == key %}
|
||||
<div class="elem column small-4">
|
||||
{% set id = item.url|split("=") %}
|
||||
|
||||
<a style="background-image:url('{{ page.url~'/'~item.thumbnail|first.name }}'); background-color: grey;" href="{{ page.url~'/'~item.doc|first.name }}">
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<div class="doc_desc column small-8">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<br>
|
||||
<p>{{ item.description }}</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row doc_container">
|
||||
<div class="columns medium-12 small-11 images type">
|
||||
<div class="row">
|
||||
{% for elem in page.header.images %}
|
||||
{% if t == elem.title|hyphenize %}
|
||||
{% set class = "requested" %}
|
||||
{% else %}
|
||||
{% set class = "" %}
|
||||
{% endif %}
|
||||
<div class=" elem columns small-4 {{ class }}">
|
||||
<!-- <div class="overlay"></div> -->
|
||||
{% for img in elem.image_list %}
|
||||
<a style="background-image:url('{{page.url}}/{{img.name}}')" href="{{page.url}}/{{img.name}}" data-lightbox="{{ elem.title|hyphenize }}" data-title="{{ elem.title }} - {{ img.meta.caption }}">
|
||||
<div class="title">{{ elem.title }} ({{ elem.image_list|length }} photos)</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns medium-12 small-11 video type">
|
||||
<div class="row">
|
||||
{% for elem in page.header.vid %}
|
||||
<div class="elem columns small-4">
|
||||
{% set id = elem.url|split("=") %}
|
||||
<a style="background-image:url(' https://img.youtube.com/vi/{{ id[1]}}/0.jpg')" href="{{ elem.url }}">
|
||||
<div class="title">{{ elem.title }}</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns medium-12 small-11 pod type">
|
||||
<div class="row">
|
||||
{% for elem in page.header.pod %}
|
||||
<div class="elem pod_thumb columns large-4 small-10 small-offset-1">
|
||||
<mark>{{ elem.title }}</mark>
|
||||
<img src="{{page.url}}/{{elem.thumbnail|first.name}}" alt="">
|
||||
<br><br>
|
||||
{% for audio in elem.file %}
|
||||
<audio controls>
|
||||
<source src="{{page.url}}/{{audio.path}}" type="{{audio.type}}">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
{% endfor %}
|
||||
<p>
|
||||
{{ elem.desc }}
|
||||
</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns medium-12 small-11 newsletter type">
|
||||
<div class="row">
|
||||
{% for elem in page.header.nl %}
|
||||
<div class="columns small-12" style ="margin-bottom:1rem;">
|
||||
<a href="{{elem.url}}">
|
||||
<div class="row">
|
||||
<div class="newsletter_item small-12" >
|
||||
|
||||
<h5>{{ elem.title }}</h5>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns medium-12 small-11 media type">
|
||||
<div class="row">
|
||||
{% for elem in page.header.media %}
|
||||
<div class="columns small-12">
|
||||
<a href="{{elem.url}}">
|
||||
<div class="row">
|
||||
<div class="elem pod_thumb columns small-4">
|
||||
<img src="{{page.url}}/{{elem.thumbnail|first.name}}" alt="">
|
||||
</div>
|
||||
<div style="padding-left:1rem; margin:0;"class="elem small-8">
|
||||
|
||||
<p><mark>{{ elem.title }}</mark><br></p>
|
||||
<p><b>{{elem.date|date("d-m-Y")}}</b></p>
|
||||
<p> {{ elem.desc }} </p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
lightbox.option({
|
||||
'resizeDuration': 200,
|
||||
'wrapAround': true
|
||||
});
|
||||
|
||||
function displaysection(elem){
|
||||
let v = $(elem).data("section");
|
||||
if($(elem).hasClass("active")){
|
||||
$('.selector').removeClass("active");
|
||||
$(".section .row").show();
|
||||
}else{
|
||||
$('.selector').removeClass("active");
|
||||
$(elem).addClass("active");
|
||||
$(".section .row").hide();
|
||||
$(".section").find(`[data-type='${v}']`).show();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
$(".selectable").each(function(){
|
||||
if($(this).hasClass("select")){
|
||||
console.log(this);
|
||||
var e=$(this).data("type");
|
||||
$(".type").hide();
|
||||
$("."+e).show();
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user