53 lines
2.2 KiB
HTML
53 lines
2.2 KiB
HTML
{% if section.background %}
|
|
<div class="bg-section" style="background: {{ section.background }};">
|
|
{% endif %}
|
|
{% if section.image.type == "video" %}
|
|
{% set video = Video(section.image) %}
|
|
{% set format = settings.ffmpeg.extension %}
|
|
{% set caption = section.text %}
|
|
{{ video.copy() }}
|
|
<section class="bordered-picture baguette" style="position: relative;">
|
|
<div class="caption">
|
|
<img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" src="" alt="">
|
|
<video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="none" muted>
|
|
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
|
|
</video>
|
|
{% if caption %}
|
|
<div class="caption__overlay">
|
|
<h5 class="caption__overlay__title">{{ caption }}</h5>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
{% else %}
|
|
{% set image = Image(section.image) %}
|
|
{% set caption = section.text %}
|
|
{{ image.copy() }}
|
|
<section class="bordered-picture baguette">
|
|
<div class="caption">
|
|
<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") }}"
|
|
>
|
|
<picture>
|
|
<source srcset="{{ image.generate_thumbnail("x450") }}" media="(max-width: 450px)"/>
|
|
<source srcset="{{ image.generate_thumbnail("x800") }}" media="(max-width: 800px)"/>
|
|
<source srcset="{{ image.generate_thumbnail("x1366") }}" media="(max-width: 1366px)"/>
|
|
<source srcset="{{ image.generate_thumbnail("x1920") }}" media="(max-width: 1920px)"/>
|
|
<img src="{{ image.generate_thumbnail("x1920") }}" data-original="{{ image }}" alt=""/>
|
|
</picture>
|
|
{% if caption %}
|
|
<div class="caption__overlay">
|
|
<h5 class="caption__overlay__title">{{ caption }}</h5>
|
|
</div>
|
|
{% endif %}
|
|
</a>
|
|
</div>
|
|
</section>
|
|
{% endif %}
|
|
{% if section.background %}
|
|
</div>
|
|
{% endif %}
|