Merge pull request #95 from Psycojoker/QSchulz-flex-grow

flex grow

.travis.yml

@@ -1,5 +1,5 @@
 sudo: required
-dist: trusty
+dist: xenial
 language: python
 install:
   - sudo apt-get install graphicsmagick libav-tools -y

prosopopee/prosopopee.py

@@ -16,6 +16,7 @@ Options:
 import os
 import shutil
 import socketserver
+import subprocess
 import http.server
 
 import ruamel.yaml as yaml
@@ -139,6 +140,17 @@ class Video(object):
 
         return thumbnail_name
 
+    @property
+    def ratio(self):
+        if self.options["binary"] == "ffmpeg":
+            binary = "ffprobe"
+        else:
+            binary = "avprobe"
+        command = binary + " -v error -select_streams v:0 -show_entries stream=width,height -of csv=p=0 " + self.base_dir.joinpath(self.name)
+        out = subprocess.check_output(command.split())
+        width,height = out.decode("utf-8").split(',')
+        return float(width) / int(height)
+
     def __repr__(self):
         return self.name
 
@@ -266,6 +278,13 @@ class Image(object):
 
         return thumbnail_name
 
+    @property
+    def ratio(self):
+        command = "gm identify -format %w,%h " + self.base_dir.joinpath(self.name)
+        out = subprocess.check_output(command.split())
+        width,height = out.decode("utf-8").split(',')
+        return float(width) / int(height)
+
     def __repr__(self):
         return self.name
 

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

@@ -5,12 +5,19 @@
     {% for line in section.images %}
     <div class="pictures-line">
       {% for image in line %}
-      <div class="picture caption">
-        {% if image.type == "video" %}
       {% set caption = image.text %}
+      {% if image.type == "video" %}
       {% set video = Video(image) %}
       {% set format = settings.ffmpeg.extension %}
       {{ video.copy() }}
+      {% set ratio = video.ratio %}
+      {% else %}
+      {% set image = Image(image) %}
+      {{ image.copy() }}
+      {% set ratio = image.ratio %}
+      {% endif %}
+      <div class="picture caption" style="flex-grow: {{ ratio }}">
+        {% if image.type == "video" %}
         <img class="lazy" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
         <video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
           <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
@@ -21,9 +28,6 @@
         </div>
         {% endif %}
         {% else %}
-        {% set caption = image.text %}
-        {% set image = Image(image) %}
-        {{ image.copy() }}
         <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
            data-at-450="{{ image.generate_thumbnail("x450") }}"
            data-at-800="{{ image.generate_thumbnail("x800") }}"

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

@@ -5,12 +5,19 @@
     {% for line in section.images %}
     <div class="pictures-line">
       {% for image in line %}
-      <div class="picture caption">
-        {% if image.type == "video" %}
       {% set caption = image.text %}
+      {% if image.type == "video" %}
       {% set video = Video(image) %}
       {% set format = settings.ffmpeg.extension %}
       {{ video.copy() }}
+      {% set ratio = video.ratio %}
+      {% else %}
+      {% set image = Image(image) %}
+      {{ image.copy() }}
+      {% set ratio = image.ratio %}
+      {% endif %}
+      <div class="picture caption" style="flex-grow: {{ ratio }}">
+        {% if image.type == "video" %}
         <img class="z-depth-2 lazy responsive-img" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
         <video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
           <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
@@ -21,9 +28,6 @@
         </div>
         {% endif %}
         {% else %}
-        {% set caption = image.text %}
-        {% set image = Image(image) %}
-        {{ image.copy() }}
         <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
            data-at-450="{{ image.generate_thumbnail("x450") }}"
            data-at-800="{{ image.generate_thumbnail("x800") }}"