video index material

This commit is contained in:
Adrien Beudin 2016-05-06 14:16:43 +02:00
parent feed72fa26
commit fd3eca33e8
8 changed files with 91 additions and 86 deletions

View File

@ -35,6 +35,7 @@
<video autoplay loop muted class="fillWidth">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
<img class="full-picture" src="{{ video.generate_thumbnail("900") }}">
</div>
{% set video = "" %}
{% else %}

View File

@ -151,12 +151,10 @@ div#bg-section {
margin-top: 20px
}
.parallax video {
video.fillWidth {
position: absolute;
z-index: 0;
bottom: 0;
}
.parallax video.fillWidth {
width: 100%;
}

View File

@ -8,24 +8,29 @@
{% block content %}
<div class="container">
<div class="row">
{% for galleries_line in galleries|reverse|batch(3)|reverse %}
{% for galleries_line in galleries|reverse|batch(2)|reverse %}
{% for gallery in galleries_line|reverse %}
{% if loop.length is divisibleby 2 %}
<div class="col s12 m12 l6">
{% else %}
{% if loop.last %}
<div class="col s12 m12 l6">
{% else %}
<div class="col s12 m12 l6">
{% endif %}
{% endif %}
<div class="col s12 m12 l{{ 12 // galleries_line|length }}">
<a href="{{ gallery.link }}">
<div class="card hoverable blue-grey lighten-5">
<div class="card-image">
{% if gallery.cover_type == "video" %}
{% set video = Video(gallery.cover) %}
{{ video.copy() }}
{% else %}
{% set cover = Image(gallery.cover) %}
{{ cover.copy() }}
<img class="responsive-img hide-on-large-only" src="{{ cover.generate_thumbnail("x900") }}">
<img class="small-card hide-on-med-and-down" src="{{ cover.generate_thumbnail("x900") }}">
{% endif %}
{% if video %}
<img class="responsive-img" src="{{ video.generate_thumbnail("900") }}">
<video autoplay loop muted class="fillWidth">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
{% set video = "" %}
{% else %}
<img src="{{ cover.generate_thumbnail("x900") }}">
{% endif %}
<span class="card-title truncate">{{ gallery.title }}
{% if gallery.sub_title %} : {{ gallery.sub_title }}{% endif %}
</span>
@ -61,17 +66,17 @@
</a>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
<script type="text/javascript" src="static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
<script type="text/javascript" src="static/js/materialize.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
<script type="text/javascript" src="static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
<script type="text/javascript" src="static/js/materialize.min.js" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$('.button-collapse').sideNav();
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});
</script>
{% endblock %}
</script>
{% endblock %}

View File

@ -10,13 +10,13 @@
{% endif %}
<div class="bordered-picture baguette caption">
{% if video %}
<img class="lazy" src="{{ video.generate_thumbnail("2000") }}">
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
<img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" alt="">
<video class="lazy" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
{% else %}
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
<img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}">
<img class="responsive-img lazy" data-original="{{ image.generate_thumbnail("x2000") }}" alt="">
{% if caption %}
<div class="caption__overlay card-panel center">
<h5 class="black-white">{{ caption }}</h5>

View File

@ -1,5 +1,5 @@
{% if section.background or section.color %}
<div style="{% if section.background -%}padding: 1px 0px;background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
<div id="bg-section" style="{% if section.background -%}background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
{% endif %}
<section class="html">
<center>

View File

@ -1,5 +1,5 @@
{% if section.background or section.color %}
<div style="{% if section.background -%}padding: 1px 0px;background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
<div id="bg-section" style="{% if section.background -%}background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
{% endif %}
<div class="container">
{% if section.title %}

View File

@ -18,11 +18,12 @@
<div class="card">
{% if video %}
<div class="picture card-image">
<img class="lazy" src="{{ video.generate_thumbnail("600") }}">
<img class="lazy" data-original="{{ video.generate_thumbnail("600") }}">
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
</video>
</div>
{% set video = "" %}
{% else %}
<div class="picture card-image caption">
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>

View File

@ -1,5 +1,5 @@
{% if section.background or section.color %}
<div style="{% if section.background -%}padding: 1px 0px;background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
<div id="bg-section" style="{% if section.background -%}background: {{ section.background }};{% endif %}{% if section.color -%}color: {{ section.color }};{% endif %}">
{% endif %}
<div class="container">
<p class="flow-text">