add cover video

prosopopee/prosopopee.py

@@ -290,6 +290,7 @@ def main():
                 "sub_title": gallery_settings.get("sub_title", ""),
                 "date": gallery_settings.get("date", ""),
                 "tags": gallery_settings.get("tags", ""),
+                "cover_type": gallery_settings.get("cover_type", ""),
                 "cover": cover_image_path,
             })
 
@@ -330,12 +331,16 @@ def main():
     Image.base_dir = os.getcwd()
     Image.target_dir = os.path.join(os.getcwd(), "build")
     
+    Video.base_dir = os.getcwd()
+    Video.target_dir = os.path.join(os.getcwd(), "build")
+
     index_html = open(os.path.join("build", "index.html"), "w")
 
     index_html.write(index_template.render(
         settings=settings,
         galleries=front_page_galleries_cover,
-        Image=Image
+        Image=Image,
+        Video=Video
     ).encode("Utf-8"))
 
 

prosopopee/themes/exposure/templates/index.html

@@ -23,9 +23,23 @@
           {% if gallery.tags %}<div class="gallery-tag">IN {% for tag in gallery.tags -%} <span> {{ tag }}</span> {% endfor -%}</div>{% endif %}
         </div>
       </a>
+      {% if gallery.cover_type == "video" %}
+      {% set video = Video(gallery.cover) %}
+      {{ video.copy() }}
+      {% else %}
       {% set cover = Image(gallery.cover) %}
       {{ cover.copy() }}
+      {% endif %}
+      {% if video %}
+      <div class="gallery-cover">
+          <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>
+      </div>
+      {% else %}
       <div class="gallery-cover" style="background-image: url('{{ cover.generate_thumbnail("x900") }}');"></div>
+      {% endif %}
     </div><!-- comment tricks against space between inline-block
     -->{% endfor %}
   </div>

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

@@ -1,5 +1,6 @@
 {% if section.image.type == "video" %}
 {% set video = Video(section.image) %}
+{{ video.copy() }}
 {% else %}
 {% set image = Image(section.image) %}
 {% set caption = section.text %}
@@ -10,7 +11,7 @@
     {% endif %}
         {% if video %}
     <section class="bordered-picture baguette" style="position: relative;">
-        <img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" src="{{ video.generate_thumbnail("2000") }}" alt="">
+        <img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" src="" alt="">
         <video class="lazy" id="video" 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>
@@ -18,7 +19,7 @@
     <section class="bordered-picture baguette">
         <div class="caption">
             <a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}">
-                <img class="lazy" src="{{ image }}" data-original="{{ image }}" alt="">
+                <img class="lazy" src="" data-original="{{ image }}" alt="">
                 {% if caption %}
                 <div class="caption__overlay">
                     <h5 class="caption__overlay__title">{{ caption }}</h5>

prosopopee/themes/exposure/templates/sections/full-picture.html

@@ -1,5 +1,6 @@
 {% if section.image.type == "video" %}
 {% set video = Video(section.image) %}
+{{ video.copy() }}
 {% else %}
 {% set image = Image(section.image) %}
 {{ image.copy() }}

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

@@ -15,13 +15,13 @@
             {% endif %}
             <div class="picture caption">
                 {% if video %}
-                <img class="lazy" data-original="{{ video.generate_thumbnail("600") }}" src="{{ video.generate_thumbnail("600") }}"alt="">
+                <img class="lazy" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
                 <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>
                 {% else %}
                 <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
-                    <img class="lazy" src="{{ image.generate_thumbnail("x600") }}" data-original="{{ image.generate_thumbnail("x600") }}" alt="">
+                    <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x600") }}" alt="">
                     {% if caption %}
                     <div class="caption__overlay">
                         <h5 class="caption__overlay__title">{{ caption }}</h5>