From 8b4f645a65267fb10c4b6d519cb0d0f62dba94ca Mon Sep 17 00:00:00 2001 From: Quentin Schulz Date: Sun, 5 May 2019 20:35:10 +0200 Subject: [PATCH 1/3] prosopopee: add ratio property for images To prepare for an alignment fix that requires to know the ratio of the image, let's add a ratio property. This property is calling `gm identify` which is already a dependency of prosopopee. The output of this particular `gm identify` returns the width and height separated by a comma. Signed-off-by: Quentin Schulz --- prosopopee/prosopopee.py | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/prosopopee/prosopopee.py b/prosopopee/prosopopee.py index 6499e61..dfc474e 100644 --- a/prosopopee/prosopopee.py +++ b/prosopopee/prosopopee.py @@ -16,6 +16,7 @@ Options: import os import shutil import socketserver +import subprocess import http.server import ruamel.yaml as yaml @@ -266,6 +267,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.split(',') + return float(width) / int(height) + def __repr__(self): return self.name From 54f47ecd06922d9c875bad403bbbe9968a5b4a3e Mon Sep 17 00:00:00 2001 From: Quentin Schulz Date: Sun, 5 May 2019 20:41:25 +0200 Subject: [PATCH 2/3] prosopopee: add ratio property for videos To prepare for an alignment fix that requires to know the ratio of the video screenshot, let's add a ratio property. This property is calling `ffprobe` or `avprobe` depending on whether ffmpeg or libav-tools was installed. It is not adding a new dependency. The output of this particular `ffprobe` or `avprobe` returns the width and height of the video, separated by a comma. Signed-off-by: Quentin Schulz --- prosopopee/prosopopee.py | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/prosopopee/prosopopee.py b/prosopopee/prosopopee.py index dfc474e..93899be 100644 --- a/prosopopee/prosopopee.py +++ b/prosopopee/prosopopee.py @@ -140,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.split(',') + return float(width) / int(height) + def __repr__(self): return self.name From ecb1cadbeebbf11c12370da6176b709183f866fc Mon Sep 17 00:00:00 2001 From: Quentin Schulz Date: Sun, 5 May 2019 20:43:39 +0200 Subject: [PATCH 3/3] themes: pictures-group: fix alignment when pictures do not fill the flex container In most cases, a line in a pictures-group contains enough pictures or at least in the correct format (usually in landscape mode) to actually make the browser call flex-shrink. However, in a few specific cases, when pictures do not fill the flex container, there is some space left on the right side of the line which could be filled in. In that case, we can use the flex-grow property. To be able to keep everything aligned, we need to set the flex-grow property according to the ratio of the picture so that all pictures in the line are grown proportionally. Adding this alignment fix required a bit of re-ordering so we could call the ratio property for the div of class `picture`. Fixes #92 Signed-off-by: Quentin Schulz --- .../templates/sections/pictures-group.html | 20 +++++++++++-------- .../templates/sections/pictures-group.html | 20 +++++++++++-------- 2 files changed, 24 insertions(+), 16 deletions(-) diff --git a/prosopopee/themes/exposure/templates/sections/pictures-group.html b/prosopopee/themes/exposure/templates/sections/pictures-group.html index 3fb624b..2b22b65 100644 --- a/prosopopee/themes/exposure/templates/sections/pictures-group.html +++ b/prosopopee/themes/exposure/templates/sections/pictures-group.html @@ -5,12 +5,19 @@ {% for line in section.images %}
{% for image in line %} -
+ {% 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 %} +
{% if image.type == "video" %} - {% set caption = image.text %} - {% set video = Video(image) %} - {% set format = settings.ffmpeg.extension %} - {{ video.copy() }}
{% endif %} {% else %} - {% set caption = image.text %} - {% set image = Image(image) %} - {{ image.copy() }} {% for image in line %} -
+ {% 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 %} +
{% if image.type == "video" %} - {% set caption = image.text %} - {% set video = Video(image) %} - {% set format = settings.ffmpeg.extension %} - {{ video.copy() }}
{% endif %} {% else %} - {% set caption = image.text %} - {% set image = Image(image) %} - {{ image.copy() }}