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

{% if section.image.type == "video" %}
{% set video = Video(section.image) %}
{% else %}
{% set image = Image(section.image) %}
{% set caption = section.text %}
{{ image.copy() }}
{% endif %}
{% if section.background %}
<div style="padding: 1px 0px;background: {{ section.background }};">
    {% endif %}
    <div class="bordered-picture baguette caption">
        {% if video %}
        <img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" alt="">
        <video class="lazy" 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>
        {% 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="responsive-img lazy" data-original="{{ image.generate_thumbnail("x2000") }}" alt="">
            {% if caption %}
            <div class="caption__overlay card-panel center">
                <h5 class="black-white">{{ caption }}</h5>
            </div>
            {% endif %}
        </a>
        {% endif %}
    </div>
    {% if section.background %}
</div>
{% endif %}