video index material

prosopopee/themes/exposure/templates/index.html

@@ -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 %}

prosopopee/themes/material/static/css/styles.css

@@ -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%;
 }
 

prosopopee/themes/material/templates/index.html

@@ -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 l{{ 12 // galleries_line|length }}">
-        <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 %}
             <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") }}">
+                        {% endif %}
-                                <img class="small-card hide-on-med-and-down" src="{{ cover.generate_thumbnail("x900") }}">
+                        {% 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,9 +66,9 @@
             </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>

prosopopee/themes/material/templates/sections/bordered-picture.html

@@ -10,13 +10,13 @@
     {% endif %}
     <div class="bordered-picture baguette caption">
         {% if video %}
-		<img class="lazy" src="{{ video.generate_thumbnail("2000") }}">
+        <img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" alt="">
-		<video class="lazy" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
+        <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>

prosopopee/themes/material/templates/sections/html.html

@@ -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>

prosopopee/themes/material/templates/sections/paragraph.html

@@ -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 %}

prosopopee/themes/material/templates/sections/pictures-group.html

@@ -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 %}>

prosopopee/themes/material/templates/sections/text.html

@@ -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">