magcms/prosopopee/themes/exposure/templates/sections/pictures-group.html

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

<section class="pictures-group baguette">
{% for line in section.images %}
    <div class="pictures-line">
    {% for image in line %}
        <div class="picture caption">
        {% if image.type == "video" %}
            {% set caption = image.text %}
            {% set video = Video(image) %}
            {{ video.copy() }}

            <img class="lazy" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
            <video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" 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 %}

        {% else %}
            {% set caption = image.text %}
            {% set image = Image(image) %}
            {{ image.copy() }}
            <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 %}