ecb1cadbee
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>
56 lines
2.2 KiB
HTML
56 lines
2.2 KiB
HTML
{% if section.background %}
|
|
<div class="bg-section" style="background: {{ section.background }};">
|
|
{% endif %}
|
|
<section class="pictures-group baguette" {% if section.css %}style="{{ section.css }}"{% endif %} >
|
|
{% for line in section.images %}
|
|
<div class="pictures-line">
|
|
{% 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 %}
|
|
<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 }}">
|
|
</video>
|
|
{% if caption %}
|
|
<div class="caption__overlay">
|
|
<h5 class="caption__overlay__title">{{ caption }}</h5>
|
|
</div>
|
|
{% endif %}
|
|
{% else %}
|
|
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
|
|
data-at-450="{{ image.generate_thumbnail("x450") }}"
|
|
data-at-800="{{ image.generate_thumbnail("x800") }}"
|
|
data-at-1366="{{ image.generate_thumbnail("x1366") }}"
|
|
data-at-1920="{{ image.generate_thumbnail("x1920") }}"
|
|
>
|
|
<img class="lazy" src="" data-original="{{ image.generate_thumbnail("x600") }}" alt="">
|
|
{% if caption %}
|
|
<div class="caption__overlay">
|
|
<h5 class="caption__overlay__title">{{ caption }}</h5>
|
|
</div>
|
|
{% endif %}
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
{% if not loop.last %}
|
|
<div class="separator"></div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
{% if section.background %}
|
|
</div>
|
|
{% endif %}
|