magcms/prosopopee/themes/exposure/templates/sections/bordered-picture.html

{% if section.background %}
    <div class="bg-section" style="background: {{ section.background }};">
{% endif %}

{% if section.image.type == "video" %}
    {% set video = Video(section.image) %}
    {% 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" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
                <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
            </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 }}" 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 %}