2022-05-05 16:00:44 +02:00

56 lines
2.2 KiB
HTML
Executable File

{% 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 %}