prenex/magcms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

themes: pictures-group: fix alignment when pictures do not fill the flex container

Browse Source 
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 <foss@0leil.net>
This commit is contained in:
Quentin Schulz 2019-05-05 20:43:39 +02:00
parent 54f47ecd06
commit ecb1cadbee
2 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
prosopopee/themes/exposure/templates/sections/pictures-group.html
View File

@ -5,12 +5,19 @@
{% for line in section.images %}
<div class="pictures-line">
{% for image in line %}
<div class="picture caption">
{% 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" %}
{% set caption = image.text %}
{% set video = Video(image) %}
{% set format = settings.ffmpeg.extension %}
{{ video.copy() }}
<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") }}"

20
prosopopee/themes/material/templates/sections/pictures-group.html
View File

@ -5,12 +5,19 @@
{% for line in section.images %}
<div class="pictures-line">
{% for image in line %}
<div class="picture caption">
{% 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" %}
{% set caption = image.text %}
{% set video = Video(image) %}
{% set format = settings.ffmpeg.extension %}
{{ video.copy() }}
<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") }}"