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